React Native - オブジェクト上でマップ関数を使用する方法

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

：私はこのようにそれをやっています。私はnavigation.state.paramsとのデータが、問題は今、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> 

、代わりに：私はこのようにそれをやっていますこれで4つのオブジェクトを持つオブジェクトがあります...私は、コンソール場合that is what's appears

render(){ 

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

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

データをログ「APIは」関数ではないので、今、私はマップ機能を使用したいが、私はできません。..どうすればこれを回避できますか？

Answer 1

問題は、あなたがのparamsオブジェクトにアクセスしているですが、何が欲しいのは、APIの配列です。私はあなたが反応ナビゲーションを使用していると思います。もしそうなら、機能をナビゲートするためにあなたの呼び出しは次のようにする必要があります：

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

そして、あなたはこのようにそれを取得することができます。

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

ナビゲート機能スクリーン名とのparamsオブジェクトを受け取ります。

これを読んでください：https://reactnavigation.org/docs/navigators/navigation-prop#navigate-Link-to-other-screens

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

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> 

    ) 

}