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

Question

我正在使用React并尝试从本地json文件将数据加载到我的组件中.我试图打印所有信息,包括名称中的'name':值对(不仅仅是值)使它看起来像一个表单.

我正在寻找最好的方法来做到这一点.我需要解析吗？我需要使用地图功能吗？我是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和代码中导入显示所有字段的组件.

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;

Answer 2

要关注的第一个重要问题是如何获得此JSON,如果我非常了解您的问题,那么它就是一个本地JSON文件.因此,您需要在应用程序内运行本地服务器以获取这些值.

我推荐使用node.js制作的live-server.

之后,你可以用爱可信来获取数据,然后...

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来显示你的对象,之后你做任何你想做的事!

Answer 3

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

https://github.com/mzabriskie/axios

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

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

我这里有一个示例代码，我使用的是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);
}

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

这是另一个使用 ES5 的例子

componentDidMount: function() {
    var self = this;

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

  },

通过使用第二个。您将股票作为状态存储在这里。将状态解析为数据片段。