Question

我尝试在react-native中打印此json json：

    {

        "1": {
            "text1-1": "text1-1-1",
            "text1-2": "text1-1-2",
            "data2": 
            [
              {
                "text2-1": "text1-2-1",
                "text2-2": "text1-2-2",
                "data3":
                [
                           {"text3-1": "text1-3-1","text3-2": "text1-3-2",}
                ]//data1-3
              }
            ]//data1-2
        }
        "2": {
            "text1-1": "text2-1-1",
            "text1-2": "text2-1-2",
            "data2": 
            [
              {
                "text2-1": "text2-2-1",
                "text2-2": "text2-2-2",
                "data3":
                [
                           {"text3-1": "text2-3-1","text3-2": "text2-3-2"}
                ]//data2-3
              }
            ]//data2
        },
        .
        .
        .
    }

我尝试像这样在本机中打印它们：

= text1-1-1

= text1-1-2

= = text1-2-1

= = text1-2-1

= = = text1-3-1

= = = text1-3-2





= text2-1-1

= text2-1-2

= = text2-2-1

= = text2-2-1

= = = text2-3-1

= = = text2-3-2

我将json代码插入this.state.data

export default class item extends React.PureComponent  {
    render() {

          return ();
}

第一步：

render() {

     return (
       <View>
          {this.getList()}
       <View>
     );
}

和功能：

getList(){
  let list = this.state.data;
  for(var key in list ){
    return (<View><Text>{list[key].text1-1}</Text></View>);
  }
}

打印第一个text1-1（text1-1-1）

如何打印所有文本和嵌套文本？

Answer 1

问题出在您的getList()方法内，由于您使用return (<View><Text>{list[key].text1-1}</Text></View>);，该方法仅返回一项。因此，无论列表多大，该代码仅执行一次，您可以直接从方法中返回。

您想像这样使用.map函数：

return (
  <View>
    {this.state.data.map((item) => {
      return (<View><Text>{item.text1-1}</Text></View>);
    }}
  <View>
);

但是这里的另一个问题是item.text1-1不是对对象的访问。 -1被理解为一种操作，就像您要从item.text1子跟踪1一样。您应该考虑将其重命名为text1_1。

如何在本机Render（）中使用For循环？

1 个答案: