React Leaflet：将对象从MongoDB获取到Leaflet映射作为标记（使用node.js和express）

helene 发表于 Dev

海伦

我正在尝试从MongoDB中获取数据（使用node.js和express），并使用react leaflet将它们显示为Leaflet地图上的标记。但是，我总是收到一个错误：未处理的拒绝（TypeError）：this.state.images.map不是一个函数。我不确定为什么会收到此错误，因为控制台日志中的数据看起来不错。

我的服务器：

imageRouter.get((req, res, next) => {
    ImageEntry.find({})
        .then(images => {
            res.status(200).json({
                images,
            });
        })
        .catch(err => res.status(500).json(err));
});

我的客户（API.js）：

    export async function getImages() {
    const response = await fetch(API_URL);
    return response.json();  
}

我的客户（App.js）：

        state = {
         location: {
          lat: 63.430515,
          lng: 10.395053,
        },
        zoom: 5,
        images: [],
      }

componentDidMount() {
    getImages()
      .then(images => {
        this.setState({
          images
        });
      });
  }

render(){
    const position = [this.state.location.lat, this.state.location.lng];

    console.log(this.state.images);

    return (
      <div className="app">
        <Map className="map" center={position} zoom={this.state.zoom}>
          <TileLayer
            attribution='&copy; <a 
            href="http://osm.org/copyright">OpenStreetMap</a> 
            contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          {
            this.state.images.map(image => (
              <Marker
                key={image._id}
                position={[image.latitude, image.longitude]}
                icon={imageIcon}>
                <Popup>
                  <p><em>{image.prosjekt}</em> {image.prosjektOmrade}</p>
                </Popup>
              </Marker>
            ))}
        </Map>
    );
  }

我尝试在渲染器中打印图像，以查看是否获得正确的结果。当我刷新页面时，该数组为空，但是在som ms之后，该数组内部有一些对象。它显示以下内容：

[]
 length: 0
 __proto__: Array(0)

som ms之后

{images: Array(4)}
    images: Array(4)
     0: {_id: "6026b6c272d2e50d47533055", prosjekt: "E6KAA", prosjektOmrade: "Holvegen", parsell: 1200, kategori: "VVS", …}
     1: {_id: "602804da7be224141e19b38d", prosjekt: "E6KAA", prosjektOmrade: "Holvegen", parsell: 1200, kategori: "VVS", …}
     2: {_id: "602ab78bbde3a7233bf9954e", prosjekt: "E6KAA", prosjektOmrade: "Bro", parsell: 233, kategori: "Bro", …}
     3: {_id: "602d31a9311aec0f1bef820f", prosjekt: "E6KAA", prosjektOmrade: "rundkjøring", parsell: 400, kategori: "Vei", …}
     length: 4
    __proto__: Array(0)
    __proto__: Object

我不知道为什么会出错，真的希望有人能帮助我。非常感谢，谢谢！

kboul

componentDidMount() {
    getImages()
      .then(images => {
        this.setState({
          images: images.images
        });
      });
  }

或通过破坏

 componentDidMount() {
        getImages()
          .then(({images}) => {
            this.setState({ images });
          });
      }

从评论：

this.state.images在获取数据前几秒钟为空。尝试使用表达式this.state.images.length > 0 && this.state.images.map...以确保填充了数据数组
如果返回的数据模型是对象数组的数组，则仅通过make访问数据，images.images但是在不知道返回的数据的确切形式的情况下很难确切地说出来。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。