React Leaflet：将对象从 MongoDB 获取到 Leaflet 地图作为标记使用 node.js 和 express

如何解决React Leaflet：将对象从 MongoDB 获取到 Leaflet 地图作为标记使用 node.js 和 express

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

我的服务器：

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>
    );
  }

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

[]
 length: 0
 __proto__: Array(0)

几秒钟后

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

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

解决方法

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

或者通过解构

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

来自评论：

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