如何使用 reactJS 从复杂的 JSON 文件中提取数据？答案

【问题标题】：How can I extract data from complex JSON file with reactJS?如何使用 reactJS 从复杂的 JSON 文件中提取数据？
【发布时间】：2020-05-04 00:19:21
【问题描述】：

我是 reactJS 的新手。我有一个如下所示的 JSON 文件：

我想提取数据并显示每个帖子及其 cmets、评论和创建时间的用户，并使用地图功能通过 JSX 显示它。所以我在我的状态下声明了一个名为 items 的空数组，并将所有这些数据放入其中并尝试浏览它，但我收到了这个错误：

×
TypeError：无法读取未定义的属性“数据”

这是我的代码：

render() {
    return (
        <div>
            <h1>Hello World !!!! </h1>
      <ul>
        { this.state.items.comments.data.map(item => <li key={item.id}>{item.data[item].from.name}</li>)}
      </ul>
      </div>
    )
  }

【问题讨论】：

问题是 cmets 本身就是一个对象数组，我想出了解决方案，谢谢您
文本图像不可搜索或不可访问。请edit 用它包含的 JSON 来扩充图像的问题，或者更好地用它包含的 JSON 的minimal reproducible example 替换它。

标签： json reactjs jsx

【解决方案1】：

很高兴认识你。我可以解决它。请按以下方式操作。

render() {
return (
    <div>
        <h1>Hello World !!!! </h1>
  <ul>
    { this.state.items.comments.data.map(item => <li key={item.id}>{item.from.name}</li>)}
  </ul>
  </div>
)

请回复您的意见。最好的问候。

【讨论】：

【解决方案2】：

在你的 json 文件中看起来你得到了数组数组试试这个希望这会奏效

this.state.items.map((item,index)=>{
    this.state.items[item].comments.data.map(element=>
        <li key={item.id}>{item.from.name}</li>)
    })
})

【讨论】：

问题是 cmets 本身就是一个对象数组，我想出了解决方案，谢谢您

【解决方案3】：

我发现我必须在另一个地图中使用地图，因为我在另一个数组中有一个数组，这段代码解决了这个问题：

render{
  return (
    <div>
        {
          this.state.items.map((item) => {
            return (
              <div>
                <h4>{item.id}</h4>
                <ul>
                  {
                    item.comments.data.map((data) => {
                      return (
                          <li>
                            {data.message} :  {data.created_time} : {{data.from.name}
                          </li>
                      );
                    })
                  }
                </ul>
              </div>
            );
          })
        } 
    </div>
  );
}

【讨论】：