Question

我正在创建一个从获取功能获取一些数据的APP。这里没问题。数组正确地包含数据。我是这样做的：

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

render(){

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

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

现在我想使用map功能，但我不能，因为'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>

      )

}

Answer 2

您可以将 Object.entries 与RN一起用于映射对象的键/值对。例如：

const api = { 'foo': 'bar', 'foz': 'baz'};
...
render() {
  return (
    Object.entries(api).map(([key, value]) => {
      return <View key={key}>{value}</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函数

3 个答案: