反应异步数据（对象）在分配给状态时被损坏

Question

我是 React 的新手，在数据绑定方面遇到了一些问题。似乎当我将一个对象分配给另一个对象时，它被损坏了，我无法使用它的键来定位。我在 http://jsfiddle.net/rexonms/uv7scjb6/ 设置了 fiddle。

提前致谢

function getMyData(){
    return {name: 'foo', age: 20};
}

var Header = React.createClass({

        getInitialState: function () {
            return {data:null};
        },

        loadData: function () {
             this.setState({data: getMyData()});
        },

        componentDidMount: function () {
            this.loadData();
        },


        // Render the component
        render: function() {

            return(
                <div>
                    Welcome, {this.state.data.name}
                </div>
            );
        }
    });

React.render(<Header />, document.getElementById('container'));

Answer 1

在初始状态下，state.data仍然为空，render()失败。永远不会挂载组件，也永远不会加载数据。

如果数据为空，您可以将渲染方法更新为return一个不同的<div>，或者您应该提供一个不同的初始状态。

render: function() {
  if(!this.date.data) {
    return(<div>Loading...</div>);
  }
  return(<div>Welcome, {this.state.data.name}</div>);
}

反应异步数据（对象）在分配给状态时被损坏

React async data (object) getting corrupted while assigned to state

javascript

reactjs