React Native - 如何在对象上使用映射函数

Question

我正在创建一个从 fetch 函数获取一些数据的应用程序。这里没问题。数组的数据正确。我这样做是这样的：

 constructor(){
    super()
    this.state = {
      fetching: false,
      api: []
    }
  }

componentWillMount(){
    this.setState({ fetching: true })

    api.getMonuments().then(res => {
      this.setState({
        api: res,
        fetching: false
      })
    })
  }

我得到了这个数据：一个由 4 个对象组成的数组

然后我想将该数据传递到另一个场景。我这样做是这样的：

<View style={styles.contentContainer}>
      <TouchableHighlight
        style={[styles.button, {marginBottom:0}]}
        onPress={() => navigate('Monumento', this.state.api)}
        underlayColor='#000'
      >
        <View style={styles.buttonContent}>
          <Animatable.Text
            style={styles.buttonText}
            animation="bounceInLeft"
            duration={1500}
          >
          Click here!
          </Animatable.Text>
        </View>
      </TouchableHighlight>
    </View>

在另一个场景中，我使用 navigation.state.params 获取该数据，但现在的问题是不再有一个包含 4 个对象的数组，而是一个包含 4 个对象的对象......如果我控制台记录所显示的数据

render(){

    const api = this.props.navigation.state.params;

    console.log('API:', api)
    ...

现在我想使用地图函数，但我不能，因为“api”不是函数......我该如何解决这个问题？

Answer 1

render(){
   var api={"bar":"nihao"};
     return(
        <View>
        {Object.entries(api).map(([key,v])=>{
            return <View key={key}><Text>{v}</Text></View>
        })}
        </View>

      )

api 是单个对象而不是数组。

api 是一个数组。

render(){
   var api=[{"bar":"nihao"},{"bar":"nihao2"},{"bar":"nihao3"}];
     return(
        <View>
        {api.map((v,index)=>{
             return <View key={index}><Text>{v.bar}</Text></View>
        })}
        </View>

      )

}