带有套接字嵌套JSON解析数据的ReactJS问题

小编典典

带有套接字嵌套JSON解析数据的ReactJS问题

reactjs

我有一个JSON文件，其结构类似于“ data.json”

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

在我的React代码中，我有数据来设置我的React状态。我想将Object2传递给其他组件，但似乎无法区分数据。

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

class App extends Component {
    constructor() {
        super();

        this.state = {
            data: null
        };
        this.socket = io('http://localhost:5000');

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

    componentDidMount() {
        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;

当我尝试引用诸如this.state.data或this.state.data.Object1.name之类的内容时，它指向一个空对象。我究竟做错了什么？

阅读 506

2020-07-22

共1个答案

小编典典

我对套接字不太了解，但是由于您是在第一次渲染后设置状态，因此在componentDidMount完成其工作之前不会有任何数据。因此，您需要条件渲染。

const data = {

  "Object1": {

    "name": "1",

      "rank": "2"

  },

  "Object2": {

    "name": "3",

      "rank": "4"

  }

};



const fakeRequest = () => new Promise( resolve =>

  setTimeout( () => resolve(data), 2000 )

);



class App extends React.Component {

  state = {

    data: null,

  };



  componentDidMount() {

    fakeRequest().then( data => this.setState({data}));

  }



  render() {

    return <div>

      {!this.state.data ? "No data yet, wait 2 seconds." : this.state.data.Object1.name }

    </div>;

  }

}



ReactDOM.render(<App />, document.getElementById("root"));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

您不能使用，{this.state.data}因为React子对象不能成为对象。您需要使用该对象的值。

2020-07-22