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

【问题标题】：React - load all data from json into componentReact - 将所有数据从 json 加载到组件中
【发布时间】：2017-12-14 14:57:30
【问题描述】：

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

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

我的代码示例： test.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？从本地文件？来自异步 http 请求？您想显示键或值吗？还是两者兼而有之？
我想从本地文件中获取 json 并且我想同时显示键和值
"import from json" 你在编译时有可用的静态文件吗？如果是，并且您正在使用 webpack 2 import json from './path/to/file.json' 就足够了。对于 webpack 1，您需要为 *.json 文件类型包含 json-loader。
截至“显示所有字段” - 这太宽泛了。怎么显示？ <pre>{JSON.stringify(json, null, 2)}</pre>够了吗？

标签： javascript json reactjs parsing

【解决方案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;

【讨论】：

【解决方案2】：

要关心的第一个重要问题是您希望如何获取此 JSON，如果我非常了解您的问题，它是一个本地 JSON 文件。所以你需要在你的应用中运行一个本地服务器来获取这些值。

我推荐 live-server，用 node.js 制作。

之后你可以使用axios来获取数据然后...

import React, {Component} from 'react';
import axios from 'axios';

constructor (props) {
   this.state = {
         items: [],
   }
   axios.get('http://localhost:8080/your/dir/test.json') 
    .then(res => {
        this.setState({ items: res.data });  
   });
}
class Test extends Component {
    console.log(this.state.items);
    render () {
      return (

           ) 
      }
};

export default Test;

我已经在渲染之前放置了一个 console.log 来显示你的对象，然后做任何你想做的事情！

【讨论】：

【解决方案3】：

使用 JSON.parse(json) 示例：

JSON.parse(`{"person": {
    "name": "John",

    "lastname": "Doe",
    "interests": [
        "hiking",
        "skiing"
    ],
    "age": 40
}}`);

【讨论】：

【解决方案4】：

您好，最好的解决方案是使用 Axios。

https://github.com/mzabriskie/axios

尝试查看他们的 API，它非常简单。

是的，您可能需要一个 map 函数来循环解析数据。

我这里有一个示例代码，我使用的是 Axios。

import axios from 'axios';
const api_key = 'asda99';
const root_url = `http://api.jsonurl&appid=${api_key}`;

export function fetchData(city) {    //export default???
  const url = `${root_url}&q=${city},us`;
  const request = axios.get(url);
}

request 是您获取解析数据的地方。继续玩吧

这是另一个使用 ES5 的示例

componentDidMount: function() {
    var self = this;

    this.serverRequest =
      axios
        .get("http://localhost:8080/api/stocks")
        .then(function(result) {
          self.setState({
            stocks: result.data
          });
        })

  },

使用第二个。您将库存作为状态存储在此处。将状态解析为数据片段。

【讨论】：

axios 是本地文件吗？还是只是http请求？我正在使用本地文件
是的，它可以是本地文件和远程请求。在这里你可以切换
从 const root_url = http://api.jsonurl&appid=${api_key} 切换；到'./file.json'

【解决方案5】：

在http://localhost:3001/ 之后键入您的 JSON 文件目录： Mydata.json 是我的 JSON 文件名，你输入你的文件名：不要忘记在顶部导入 axios。 *

componentDidMount() {
    axios.get('http://localhost:3001/../static/data/Mydata.json')
      .then(response => {
      console.log(response.data)
      this.setState({lists: response.data})
    })
 }

【讨论】：

【解决方案6】：

如果您通过 HTTP 加载文件，则可以使用内置的 window.fetch() 函数（在过去几年的浏览器中，请参阅 Mozilla's developer pages 以获得兼容性支持）。

fetch("https://api.example.com/items")
  .then(res => res.json())

React 文档解释了其他一些处理Ajax requests 的方法（即来自已加载网页中的请求）。

如果您的 JSON 在本地文件中，则只需导入它，正如其他人解释的那样：

import test from 'test.json';

【讨论】：