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

Question

I am fairly new to React and having some issue with data binding. It seems like when I assign an object to another object to another object it gets corrupted and I cannot target using it's key. I have fiddle set up at http://jsfiddle.net/rexonms/uv7scjb6/ .

Thanks in advance

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

In the initial state, the state.data is still null and render() fails. The component never gets mounted and the data never gets loaded.

You can update the render method to return a different <div> if the data is null or you should provide a different initial state.

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