Javascript React异步数据（对象）在分配给状态时损坏

我是个新手，对数据绑定有一些问题。似乎当我将一个对象分配给另一个对象时，另一个对象会被破坏，我无法使用它的键来确定目标。我已在家里摆好小提琴

提前谢谢

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'));

函数getMyData（）{ 返回{name:'foo'，年龄：20}； } var Header=React.createClass({ getInitialState:函数（）{ 返回{data:null}； }, loadData:函数（）{ this.setState（{data:getMyData（）}）； }, componentDidMount:函数（）{ 这是loadData（）； }, //渲染组件 render:function（）{ 返回( 欢迎，{this.state.data.name} ); } }); React.render（，document.getElementById（'container'）；

---

在初始状态下，

状态.data

仍然为空，并且

render（）

失败。 组件永远不会装入，数据也永远不会装入

如果数据为null或应提供不同的初始状态，则可以更新render方法以返回不同的

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

render:function（）{
如果（！this.date.data）{
返回（加载…）；
}
return（欢迎，{this.state.data.name}）；
}

返回{data:null}---请再说一遍，如何从
null
获取
name
？我的理解是，当componentDidMount执行时，它调用新的loadData函数。loadData将进行异步调用。加载数据后，它不应该将data:null更新为data:getMyData（）结果吗？我在这里遗漏了什么。应该是这样的（如果你的代码没有崩溃），但是从
null
访问
name
怎么样？嗯。。。好问题。我知道为什么失败了。我需要重组初始状态。非常感谢您的快速回复。