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

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

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

我的代码示例： 测试.json

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

test.js

import React, {Component} from 'react';

class Test extends Component {
    render () {
      return (

           ) 
      }
};

export default Test;

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

如果您的 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;