react-native 中的重复组件

Question

I developed an api that returns some data for each user that uses my React Native app. This API returns an array of objects which can I console.log() and see them.

What I am trying to do is show each object in this array in a particular ( element)

listeFinale is declared in the state as an empty array

liste is the array of objects that is returned by the API

The code below is executed if the fetch was successful

this.state.listeFinale = this.state.liste.map(n => (
    <Text key={n.Id}>
      {n.Nume}
      {n.Observatii}
    </Text>
    )
)

Then, in the render() method I have:

 return (
  <View style={styles.container}>
    <Text>Lists for user id {this.state.userId}</Text>
    {this.state.listeFinale}
  </View>
);

Nothing is shown in the app, all I see is the text and the user ID. I am new to React Native and I could really use some advice from you guys.

Thank you in advance!

Answer 1

You can make the map loop inside the render method.

To reassign the state after a fetch use setState() ( in case you are not using the useState() hook )

So you will have something like

state = {
    liste = []
}

componentLifeCycle () {// in case you don't use hooks
    fetch().then((response) => { // or async await
     this.setState({liste : response})
    }
}
return (
  <View style={styles.container}>
    <Text>Lists for user id {this.state.userId}</Text>
    {this.state.liste.length > 0 && this.state.liste.map(n => (
        <Text key={n.Id}>
          {n.Nume}
          {n.Observatii}
        </Text>
    )}
  </View>
);

Also I would suggest you use english when defining variables and other names in your code for better readability. You never know who might end up debugging or working on your code.

Another suggestion would be to use Redux to store your ' fetch ' data inside your app state. And get it from there instead of doing fetch inside the component. Components should just render data from state and not interact directly with the API. Keep them clean and simple.