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

Z时代
2024-01-10
分类：问答

我有一个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之类的内容时，它指向一个空对象。我究竟做错了什么？

回答：

我对套接字不太了解，但是由于您是在第一次渲染后设置状态，因此在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>