在 React Native 中循环 Json 和显示

Posted 2023-02-22

【中文标题】在 React Native 中循环 Json 和显示

【英文标题】：Looping Json & Display in React Native

【发布时间】：2016-03-19 02:30:16

【问题描述】：

如何循环从 Json 检索到的结果？

render: function() 
     console.log(this.state.list);
     contents = (
      <View style= styles.content >
        <Text>Loaded</Text>

      </View>
     )
     return (
      <View style= styles.container >
        <View style= styles.header >
        <Text style= styles.headerText >XXX</Text>
        </View>
        <View style= styles.content >
             contents 
        </View>
      </View>
    );
  

【参考方案1】：

React 可以渲染元素数组，因此您只需构造一个数组并将其分配给您的contents 变量。我用map做了一个例子。

render: function() 
     console.log(this.state.list);
     contents = this.state.list.results.map(function (item) 
        return (
          <View key=item.user.email style= styles.content >
            <Text>item.user.email</Text>
          </View>
        );
     );
     return (
      <View style= styles.container >
        <View style= styles.header >
        <Text style= styles.headerText >XXX</Text>
        </View>
        <View style= styles.content >
             contents 
        </View>
      </View>
    );
  

另外：当你在 React 中有一个元素数组时，你应该为数组中的每个元素提供一个唯一的 key 属性。 See why。在这种情况下，我使用item.user.email 作为唯一标识符，但您可以使用另一个属性，只要确保它是唯一的（item.user.md5 很有希望）

【讨论】：

确保this.state.list 对象中始终包含results 数组。您可以添加更多逻辑来处理您的状态，或者只添加 if/else 条件来获得您想要的contents。

我使用 list: results:[] at getInitialState 初始化

但我收到警告：数组或迭代器中的每个孩子都应该有一个唯一的 key 道具，请建议 :)

那是我没有设置key 属性的错误。检查我更新的答案。