时间戳

首页 > 解决方案 > react-native 中的重复组件

javascript - react-native 中的重复组件

问题描述

我开发了一个 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 的新手，我真的可以从你们那里得到一些建议。

先感谢您！

标签： javascriptreactjsreact-native

解决方案

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

在 fetch 使用后重新分配状态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 交互。保持它们干净和简单。

推荐阅读