React-Native 中的重复组件

Question

我开发了一个 api，它为使用我的 React Native 应用程序的每个用户返回一些数据。该 API 返回一个对象数组，我可以console.log()看到它们。

我想做的是在特定的（元素）中显示该数组中的每个对象

listeFinale在该州被宣布为empty array

liste是 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 = {&nbsp; &nbsp; liste = []}componentLifeCycle () {// in case you don't use hooks&nbsp; &nbsp; fetch().then((response) => { // or async await&nbsp; &nbsp; &nbsp;this.setState({liste : response})&nbsp; &nbsp; }}return (&nbsp; <View style={styles.container}>&nbsp; &nbsp; <Text>Lists for user id {this.state.userId}</Text>&nbsp; &nbsp; {this.state.liste.length > 0 && this.state.liste.map(n => (&nbsp; &nbsp; &nbsp; &nbsp; <Text key={n.Id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {n.Nume}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {n.Observatii}&nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; )}&nbsp; </View>);另外，我建议您english在代码中定义变量和其他名称时使用，以获得更好的可读性。您永远不知道谁最终可能会调试或处理您的代码。另一个建议是使用 Redux 将“获取”数据存储在应用程序状态中。并从那里获取它，而不是在组件内部进行 fetch。组件应该只渲染状态数据，而不是直接与 API 交互。保持它们干净简单。