我想用 .map() 显示我的状态

Question

我有这样的状态：

我想在我的渲染中用 .map() 显示它：

{this.state.markers.map((marker, key) => (
     <Marker
         key={key}
         coordinate={this.state.markers[marker].coordinate}
         title={this.state.markers[marker].title}
         description={this.state.markers[marker].address}
         image={require('../images/community.png')}
      />
 ))}  

但每次测试，我都有这样的回应：

this.state.markers.map is not a function

我该怎么做？

Answer 1

根据您的ScreenShot，this.state.markers 不是array，而是Object，因此您无法按原样映射它。 p>

为了映射它，您需要使用Object.keys。

生成的代码会变成

{Object.keys(this.state.markers).map((marker, key) => (
    <Marker
        key={key}
        coordinate={this.state.markers[marker].coordinate}
        title={this.state.markers[marker].title}
        description={this.state.markers[marker].address}
        image={require('../images/community.png')}
    />
))}