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

Question

我正在尝试从 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 毫秒后

{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

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

Answer 1

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... 以确保填充数据数组
如果返回的数据模型是对象数组的数组，只需通过 images.images 访问数据，但如果不知道返回数据的确切形式，就很难准确地说出来。

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

React Leaflet: Get objects from MongoDB to Leaflet map as markers (using node.js and express)

javascript

node.js

leaflet

reactjs

react-leaflet