如何使用 React 访问 JSON 格式中包含的对象数组中的特定元素？答案

【问题标题】：How can I access a particular element in an array of objects contained in JSON format using react?如何使用 React 访问 JSON 格式中包含的对象数组中的特定元素？
【发布时间】：2018-07-19 21:22:09
【问题描述】：

我得到了一个 json 文件（data.json），其中包含一个数组中的多个对象，我想在每个对象中获取某个键的值。我正在使用 react redux 来获取这些值，然后将它们显示为网页上的表格。

以下文件是文件的简化版本，它在每个数组元素中都有更多的键。这就是为什么我不确定是否使用 "state = {..." 因为我必须列出太多元素。

{"state":"OK","display":"success","information":
[
    {"name":"North","type":"REGION"},
    {"name":"South","type":"REGION"},
    ....

所需的输出将在这样的网页上：

北南 ... ...

【问题讨论】：

你能分享你的Json或例子吗，你要求的结果是什么
forEach, map, reduce，选择一个。我会推荐reduce，因为它比所有其他数组方法具有更多的功能。
请更新您的问题并提供所有详细信息。您给出了一个所需的输出示例，但是您想在哪里以及如何计划使用此输出？您问题的 React 部分在哪里？您到现在为止尝试过什么？除此之外，还可以编写一个简单的 JS 代码，通过 console.log 为您提供所需的输出。这显然不是你想要的。所以，请给我们更多的细节。

标签： javascript json reactjs react-redux

【解决方案1】：

据我了解，您想使用name 属性创建一个表。这是一个简单的例子。

    class App extends React.Component {
      state = {
          "state": "OK",
          "display": "success",
          "information": [
            { "name": "North", "type": "REGION" },
            { "name": "South", "type": "REGION" },
          ],
      };
      render() {
        return (
          <div>
            <table>
              <tr>
                {
                  this.state.information.map( el => 
                    <td>{el.name}</td>
                  )
                }
              </tr>
            </table>
          </div>
        );
      }
    }
    
    ReactDOM.render(
    <App />,
    document.getElementById("app")
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

【讨论】：