Question

开始玩反应，只是学习当前的小语法，我坚持使用数据显示的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>
        );
    }
});

React JS，加载json数据然后操纵它

1 个答案: