Question

原始问题在这里ReactJS with Sockets Nested JSON parsing data issue

我正在尝试从套接字服务器发出的事件设置我的react应用程序的setState。当然，我知道当我设置状态时，它不会立即发生，并且会发生异步。

我的目标是创建一个文件，其中包含网站所需的一切，并且我想通过套接字发送该文件。我想设置状态，然后将适当的数据作为道具传递。请让我知道解决此问题的最佳方法。我尝试了setTimeout并在主体中创建条件渲染选项。我的问题是我仍然无法引用诸如this.state.data.Object1.name之类的对象。也许我没有说明数据是否全部完成？

// import packages
import React, { Component } from "react";
import io from 'socket.io-client';

// import Homepage from './components/homepage/Homepage.js'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: null
        };
        this.socket = io('http://localhost:5000');

        // Binders
        this.updateState = this.updateState.bind(this);
    }

    componentWillMount() {
        this.socket.on('send data', this.updateState);
    }

    updateState(result) {
        this.setState({
            data: result
        });
    }

    render() {
        return (
            <p style={{ textAlign: "center" }}>
                {this.state.data}
            </p>
        );
    }
}

export default App;

我的JSON文件是这个

{
    "Object1": {
        "name": "1",
        "rank": "2"
    },
    "Object2": {
        "name": "3",
        "rank": "4"
    }
}

ReactJS套接字setState异步结构问题

0 个答案: