React - 将所有数据从 json 加载到组件中

Question

我正在使用 React 并尝试将数据从本地 json 文件加载到我的组件中。我正在尝试打印所有信息，包括名称：值对（不仅仅是值）中的“名称”，以使其看起来像一个表单。

我正在寻找最好的方法来做到这一点。我需要解析吗？我需要使用地图功能吗？我是 React 的新手，所以请向我展示带有代码的解决方案。我见过与此类似的其他问题，但它们包含许多我认为不需要的其他代码。

我的代码示例：test.json

 {"person": {
  "name": "John",
  "lastname": "Doe",
  "interests":
  [
    "hiking",
    "skiing"
  ],
  "age": 40
}}

测试.js

 import React, {Component} from 'react';

class Test extends Component {
    render () {
      return (

           )
      }
};

export default Test;

我需要允许我从 json 导入的代码和显示所有字段的组件内部代码。

原文由 ChloeH 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你的 json 存储在本地，你不必使用任何库来获取它。只需导入它。

 import React, {Component} from 'react';
import test from 'test.json';

class Test extends Component {
  render () {
    const elem = test.person;
    return (
     <ul>
       {Object.keys(elem).map((v, i) => <li key={i}>{v} {test[v]}</li> )}
     </ul>
    )
  }
};

export default Test;

原文由 kind user 发布，翻译遵循 CC BY-SA 3.0 许可协议