Reactjs React map redux state在一个组件中创建多个组件

我正在使用图书馆。为了在Mapbox组件中创建多个覆盖组件，我需要映射一组点。然而，在尝试映射数组时，我总是得到一个未定义的错误。我对React/Redux还不熟悉，所以不确定问题出在哪里

我的组成部分如下：

import React from 'react';
import Mapbox from 'react-redux-mapbox-gl';

import SpotsOverlay from './SpotsOverlay'

const mapStateToProps = state => ({
  spots: state.homemap.spots
})

class HomeMap extends React.Component {

    render(){

    return (

    <Mapbox
      mapboxgl={mapboxgl}
      accessToken={mapAccessToken}
      getMap={this.getMap}
      style={this.mapStyle}
      options={this.mapOptions}
    >

      {
      this.props.spots.map(spot =>{
        return (
          <SpotsOverlay
            overlay={this.overlay}
            key={spot.id}/>
        );
      })
     }

    </Mapbox>
  );
}
}

从“React”导入React；
从“react redux Mapbox gl”导入Mapbox；
从“/SpotsOverlay”导入SpotsOverlay
常量mapStateToProps=状态=>({
地点：state.homemap.spots
})
类HomeMap扩展了React.Component{
render（）{
返回(
{
this.props.spots.map（spot=>{
返回(
);
})
}
);
}
}

在返回方法之外进行映射可能会有所帮助

class HomeMap extends React.Component {

    render(){

        let spots = [];

        if(this.props.spots) {
            spots = this.props.spots.map(spot =>{
                return (
                    <SpotsOverlay
                        overlay={this.overlay}
                        key={spot.id}/>
                );
            });
        }

        return (

            <Mapbox
                mapboxgl={mapboxgl}
                accessToken={mapAccessToken}
                getMap={this.getMap}
                style={this.mapStyle}
                options={this.mapOptions}
            >
                {spots}
            </Mapbox>
        );
    }
}

类HomeMap扩展了React.Component{
render（）{
设斑点=[]；
如果（这个。道具。斑点）{
spots=this.props.spots.map（spot=>{
返回(
);
});
}
返回(
{spots}
);
}
}

正如@MayankShukla在评论中所说的那样，这种方法之所以效果更好，是因为

最初，reducer状态为{}，因此state.homemap.spots将是未定义的，并且当您使用未定义的映射时

---

应该是

this.props.spots…

而不是

props.spots。

@MayankShukla我以前试过这个，但仍然不起作用。还有其他建议吗？您是否点击任何api来获取数据？在使用

map

之前检查该值，如：

Array.isArray（this.props.sports）和&this.props.sports.map

或将reducer中的初始状态设置为

[]

，它应该可以工作。is无条件失败的原因是，最初，reducer的状态是

{}

，所以

state.homemap.spots

将是未定义的，当您使用

未定义的地图时，它抛出了错误，很高兴它解决了您的问题：）小建议，总是提到，您所做的更改以及它为什么会帮助所有人：）@MayankShukla我不确定它为什么会有帮助，我只记得当我开始使用react时遇到了类似的问题，这就解决了它。但有一点是，至少它看起来干净多了。：）这里解释，检查它为什么会解决错误，使用map变量应该是数组，否则会抛出错误，