React Native - wie Kartenfunktion für ein Objekt zu verwenden

Question

Ich erstelle eine APP, die einige Daten von Abruffunktion erhalten. Kein Problem hier. Das Array enthält die Daten korrekt. Ich mache es so:

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

Dann möchte ich, dass die Daten auf eine andere Szene zu übergeben. Ich bin es, wie dies zu tun:

<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> 

Auf der anderen Szene bekomme ich, dass die Daten mit dem navigation.state.params aber das Problem ist jetzt, dass es nicht mehr ist ein Array mit 4 Objekten in ihm, aber statt es ist ein Objekt, das 4 Objekte in ihm haben ... wenn ich die Daten Konsolprotokoll that is what's appears

render(){ 

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

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

Jetzt möchte ich die map-Funktion verwenden, aber ich kann nicht, weil ‚api‘ ist keine Funktion .. Wie kann ich das umgehen?

Answer 1

Das Problem ist, dass Sie params Objekt zugreifen, aber was Sie wollen, ist api Array. Ich nehme an, dass Sie Reagierenavigation verwenden. Wenn ja, dann auf Ihren Anruf navigieren Funktion wie folgt sein sollte:

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

Und Sie können es wie folgt abrufen:

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

Navigieren Funktion Bildschirmnamen und params Objekt nimmt.

Lesen Sie dies: https://reactnavigation.org/docs/navigators/navigation-prop#navigate-Link-to-other-screens

Answer 2

Sie können Object.entries mit RN für die Zuordnung der Schlüssel/Wert-Paare eines Objekts verwenden. Beispiel:

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 ist ein einzelnes Objekt nicht-Array.

api ist ein Array.

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> 

    ) 

}