React-Native 中的重复组件

Question

我开发了一个 api，它为使用我的 React Native 应用程序的每个用户返回一些数据。该 API 返回一个对象数组，我可以console.log()看到它们。我想做的是在特定的（元素）中显示该数组中的每个对象listeFinale在该州被宣布为empty arrayliste是 API 返回的对象数组fetch如果成功则执行下面的代码this.state.listeFinale = this.state.liste.map(n => (    <Text key={n.Id}>      {n.Nume}      {n.Observatii}    </Text>    ))然后，在render()我的方法中： return (  <View style={styles.container}>    <Text>Lists for user id {this.state.userId}</Text>    {this.state.listeFinale}  </View>);应用程序中没有显示任何内容，我看到的只是文本和用户 ID。我是 React Native 的新手，我真的需要你们的一些建议。

Answer 1

您可以在渲染方法中使地图循环。

要在获取使用后重新分配状态setState()（如果您不使用挂钩useState()）

所以你会得到类似的东西

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>

);

另外，我建议您english在代码中定义变量和其他名称时使用，以获得更好的可读性。您永远不知道谁最终可能会调试或处理您的代码。

另一个建议是使用 Redux 将“获取”数据存储在应用程序状态中。并从那里获取它，而不是在组件内部进行 fetch。组件应该只渲染状态数据，而不是直接与 API 交互。保持它们干净简单。