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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – React – 将json中的所有数据加载到组件中，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1211字，纯文字阅读大概需要2分钟。

内容图文

我正在使用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和代码中导入显示所有字段的组件.

解决方法:

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

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

之后,您可以使用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来显示你的对象,之后你做任何你想做的事！

内容总结

以上是互联网集市为您收集整理的javascript – React – 将json中的所有数据加载到组件中全部内容，希望文章能够帮你解决javascript – React – 将json中的所有数据加载到组件中所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---