React - 如何从 JSON 文件呈现内容？答案

【问题标题】：React - how to render content from JSON file?React - 如何从 JSON 文件呈现内容？
【发布时间】：2020-05-17 14:39:02
【问题描述】：

如何在 react 中正确显示 JSON 文件数据？

【问题讨论】：

标签： javascript html json reactjs

【解决方案1】：

如果您不关心订单，可以使用Object.keys()

Object.keys(data).forEach((key) => {
    console.log(data[key].name); 
});

否则，如果您确实关心顺序，请使用 for 循环并将整数转换为字符串。

for(int i = 0; i < Object.size(data); i++){
    console.log(data[i.toString()].name); 
}

【讨论】：

【解决方案2】：

你可以使用Object.keys()然后映射名称属性

import data from './data.json'


// in render function, jsx

{Object.keys(data).map(key => <span key={key}>{data[key].name}</span>)}

【讨论】：

FWIW 渲染列表时您应该提供key，此代码将在控制台中标记警告。

【解决方案3】：

您实际上只是想在此处提取对象的值，您可以在大多数现代浏览器中使用Object.values（除非您使用的是 IE，如果您是我会感到痛苦）

Object.values(data).forEach(x => console.log(x.name))

给你一个 React 的工作示例：

import data from "./data.json"

function renderLinks() {
  const records = Object.values(data);
  return (
    <ul>
      {records.map((x, i) => <li key={i}><a href="#">{x.name}</a></li>)}
    </ul>
  )
}

【讨论】：

我明白了。我想将这些名称中的每一个都嵌入到一个链接中，我可以使用 Object.values() 来做到这一点，对吗？
@DarrelGulseth 是的，你可以，而不是forEach，你可以简单地将结果映射出来，例如Object.values(data).map(x => <a href="#">{x.name}</a>)
@James 保持快乐 :)
@James 非常感谢。

【解决方案4】：

Object.keys(data) 给出 ["1", "2" ....];

所以你可以循环键

Object.keys(data).forEach(function(key){
  console.log(data[key].name);
});

【讨论】：