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

Question

我正在创建一个应用程序，它从获取功能中获取一些数据。这里没问题。该数组具有正确的数据。我是这样做的：

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

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

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

I got this data: an array of 4 objects

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

<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 个对象的对象...如果我控制台记录数据 that is what's appears

render(){

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

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

现在我想使用地图功能，但我不能，因为 'api' 不是一个功能...我该如何解决这个问题？

Answer 1

您可以使用 Object.entries 和 RN 来映射对象的 key/value 对。例如：

const api = { 'foo': 'bar', 'foz': 'baz'};
...
render() {
  return (
    Object.entries(api).map(([key, value]) => {
      return <View key={key}>{value}</View>
    });
  )
}

Answer 2

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>

      )

}

Answer 3

问题是您正在访问 params 对象，但您想要的是 api 数组。我猜你正在使用反应导航。如果是这样，那么您对导航功能的调用应该是这样的：

navigate('Monumento', {api: this.state.api}).

您可以像这样检索它：

this.props.navigation.state.params.api.

导航函数采用屏幕名称和参数对象。

读这个：https://reactnavigation.org/docs/navigators/navigation-prop#navigate-Link-to-other-screens

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

React Native - how to use map function on an object

react-native

react-native-android

react-native-ios