我有一个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完成其工作之前不会有任何数据。因此,您需要条件渲染。
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子对象不能成为对象。您需要使用该对象的值。
{this.state.data}