Question

我对React很新，并且在数据绑定方面存在一些问题。看起来当我将另一个对象的对象分配给另一个对象时，它会被破坏，我无法使用它的密钥进行目标。我在http://jsfiddle.net/rexonms/uv7scjb6/设置了小提琴。

提前致谢

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()失败。组件永远不会被挂载，数据永远不会被加载。

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

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

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

1 个答案: