如何在React中显示JSON文件的内容，并举例说明

本教程展示了如何在react组件实例中显示位于public文件夹中的json文件。
在我的应用程序中， employee.json 文件位于一个位置： react/src/employee.json 。
[    {        "id": "1",        "title": "Developer",        "firstName": "John",        "lastName": "Eric",        "salary": 5000    },    {        "id": "2",        "title": "Tester",        "firstName": "Andrew",        "lastName": "Johnson",        "salary": 6000    }]
如何在react组件中打印来自本地外部json文件的Raw json内容。
这个例子打印了从位于React应用程序中的json文件中读取的JSON内容。
在react组件中，导入json文件，如下所示
import employee from './employee.json'
JSOn内容以字符串形式读入雇员变量，将雇员变量传给JSON.stringify ，在浏览器中打印json字符串。
import React, { Component } from 'react';
import employee from './employee.json'
class LocalFileRead extends Component {
    constructor(props) {
        super(props);
    render() {
        return ({JSON.stringify(employee)}
export default LocalFileRead;
[{"id":"1","title":"Developer","firstName":"John","lastName":"Eric","salary":5000},{"id":"2","title":"Tester","firstName":"Andrew","lastName":"Johnson","salary":6000}]
如何在react组件中显示本地外部json文件。
我们已经看到如何在react组件中打印从本地文件读取的原始json字符串。
在这个例子中，读取json数据并将其打印到表格或内联元素中。
在React组件中:
用给定的路径导入json文件，json的内容被存储到一个变量中，变量的名字在导入时给出。
在渲染中，迭代导入的变量，使用map迭代数据，并使用javascript表达式打印数据。
map方法可以迭代数据元素。
下面是一个迭代数据的反应组件
import React, { Component } from 'react';
import employee from './employee.json'
class LocalFileRead extends Component {
    constructor(props) {
        super(props);
    render() {
        return (
                {employee.map((record, i) => {record.id} - {record.firstName} {record.firstName})}
export default LocalFileRead;
如何使用fetch读取外部文件。
这是读取外部json文件的另一种方法，它可以是本地或外部API Url。
你可以使用Axios或fetch来读取本地JSOn或外部API调用。
在react组件中:
创建状态属性来保存雇员的json文件
在componentDidMount()回调方法中，使用fetch访问json本地文件并读取json内容，用json内容更新状态属性。
在渲染中，读取状态数据，并打印到组件中。
import React, { Component } from 'react';
import employee from './employee.json'
class LocalFileRead extends Component {
    constructor(props) {
        super(props);
        this.state = {
            employee: []
    componentDidMount() {
        fetch("./employee.json").then((res) => res.json())
            .then((data) => {
                console.log(data)
                this.setState({ employee: JSON.stringify(data) }, () => {
                    alert(this.state.hugeText);
    render() {
        const emp = this.state.employee
        return (
                {emp.map((record, i) => {record.id} - {record.firstName} {record.firstName})}
export default LocalFileRead;
复制代码