在 ReactJS 中呈现 JSON 键值对？答案

【问题标题】：Rendering JSON key value pairs in ReactJS?在 ReactJS 中呈现 JSON 键值对？
【发布时间】：2018-04-22 00:52:38
【问题描述】：

我正在从 JS 跳到 React。我已经搜索了一些与此相关的其他线程，但它们似乎太具体了，或者回答了不同的问题。

我有一个使用 python 脚本生成的本地 JSON 文件。它类似于以下内容：
[{"hello": 10, "world": 15}]

我怎样才能从 ~~object~~ JSON TEXT 中获取键和值并通过反应组件呈现它？

我将文件存储在一个变量中，例如：
'var jsonData = require('./data.json');

当然我可以通过控制台调用带有日志的数据，但如果我尝试通过我的渲染函数显示它，例如：
<div>{jsonData}</div>

我收到一条错误消息，指出“对象作为 React 子项无效(...)”。

导入和显示 JSON 文件中的键值对的正确方法是什么？

【问题讨论】：

{'hello': 10, 'world': 15} 不是 JSON。
作为错误消息 Object is not valid React childred。您可以尝试将对象转换为字符串并显示<div>{jsonData.toString()}</div>
reactjs.org/tutorial/tutorial.html#passing-data-through-props
@RandyCasburn 你能详细说明一下吗？我的理解是 JSON 对象是基于键值对的？ [{'a':1, 'b':2] 不是 JSON 怎么办？ opensource.adobe.com/Spry/samples/data_region/…
@mochamethod 我相信@RandyCasburn 的意思是，尽管您用来表示键值对的格式是有效的 JS，但不是有效的 JSON，因为 JSON 规范明确强制使用双引号 (") ;)

【解决方案1】：

要将JSON转换为字符串，为了显示，可以使用JSON.stringify方法：

<div>{JSON.stringify(jsonData)}</div>

当然，您可能希望使用 HTML/CSS 正确格式化数据。

【讨论】：