javascript - React JS，加载json数据然后操作它

Question

开始玩 React，目前只是学习一些小的语法内容，我陷入了 AJAX 请求和数据显示。

控制台给我一个错误，说找不到 test.json 的本地版本。它与 header.js 文件位于同一目录

//header.js
import React from 'react';
import $ from 'jquery'; 

var theData = [];

var Header = React.createClass({
    getInitialState: function() {
        return {
        data: null
        };
    },
    componentDidMount: function() {
        $.ajax({
            dataType: 'json',
            url:  "./test.json",
            success: function(data) {
            theData.push(data);
            console.log(theData);
            }
        });
    },
    render: function() {
        return (
        <div>
            <div id="theData" className="theData"></div>
              {theData.someValue}
            </div>
        </div>
        );
    }
});

Answer 1

test.json 可能与 header.js 位于同一目录中，但是您的代码在客户端运行，并且客户端(浏览器)不知道什么test.json 是。

相反，您应该在服务器端逻辑中定义一个端点来读取 test.json 的内容并将其作为 JSON 对象返回给客户端。在客户端逻辑中，当前 XHR 中的 URL 属性应替换为端点的 URI。

旁注:XHR 完成后，您的组件将不会显示任何数据。 theData 将被正确改变，但不会触发组件重新渲染。相反，您应该将 XHR 响应 JSON 与组件状态(您在 getInitialState 中正确初始化)关联起来，当其值被修改时，React 将相应地重新渲染。

更新代码示例，假设您的服务器是 Express .

在服务器上:

const fs = require('fs');
const app = ...

app.get('/name-this-endpoint-appropriately', (req, res) => {
    const json = fs.readFileSync('test.json', 'utf8');
    res.send(json);
});

在客户端(修复如上面附注中所述):

import React from 'react';
import $ from 'jquery'; 

var Header = React.createClass({
    getInitialState: function() {
        return {
            data: []
        };
    },
    componentDidMount: function() {
        $.ajax({
            dataType: 'json',
            url:  "/name-this-endpoint-appropriately",
            success: (data) => this.setState({data})
        });
    },
    render: function() {
        return (
        <div>
            <div id="theData" className="theData"></div>
              {this.state.data.someValue}
            </div>
        </div>
        );
    }
});