Javascript 装载前处理空对象的最佳方法？

我有一个React类，它想要呈现一个如下所示的对象：

data: {
    title: "haha",
    description: {
        country: "US",
        year: "1996"
    }
}

但是，当React想要渲染它时，它会给出一个错误

未捕获错误：不变冲突：receiveComponent（…）：只能更新已装载的组件

我认为问题出在getInititalState中，我将数据声明为空对象，因此当我在超时后获取完整的数据对象时，React将尝试将数据对象映射到组件，但它给出了错误

但有一件有趣的事是，我可以理解这个.props.title.title，但不是这个.props.title.description.country，它会给出未定义的

但是，当我使用console.log时，我可以看到我的对象。但我无法访问它

我的猜测是，当从空对象初始化React时，它将只使用数据对象的第一级和第二级初始化虚拟DOM

这就是我尝试访问this.props.data.data.title的原因，但是this.props.data.data.description.country

下面是我的代码

var BookBox = React.createClass({
    getInitialState: function() {
        return { data: {} };
    },
    componentWillMount: function() {
        var that = this;
        setTimeout(function() {
            console.log('timeout');
            that.setState({
                data: {
                    title: "haha",
                    description: {
                        country: "US",
                        year: "1996"
                    }
                }
            });
        }, 2000);
    },
    render: function() {
        return (
            <div>
                <h1>{this.state.data.title}</h1>
                <TestBox title={this.state.data} />
            </div>
        );
    }
});

var TestBox = React.createClass({
    render: function() {
        console.log(this.props.title);
        return (
            <div>
                <p>{ this.props.title.description.country }</p>
                <p>{ this.props.title.title }</p>
            </div>
        );
    }
})

var BookBox=React.createClass({
getInitialState:函数（）{
返回{data:{}；
},
componentWillMount:function（）{
var=这个；
setTimeout（函数（）{
log（'timeout'）；
那是一个州({
数据：{
标题：“哈哈”，
说明：{
国家：“美国”，
年份：“1996年”
}
}
});
}, 2000);
},
render:function（）{
返回(
{this.state.data.title}
);
}
});
var TestBox=React.createClass({
render:function（）{
console.log（this.props.title）；
返回(
{this.props.title.description.country}

{this.props.title.title}

);
}
})

---

我可以知道处理这个问题的最好方法是什么吗？我应该在getInitialState中初始化我的数据对象结构，还是有更好的方法？

我认为您得到的

只能更新装入的组件

错误，因为您同时使用

组件将装入

和

设置超时

，但是您不知道在函数激发的时间

settimeout

之前组件是否已装入

因为您事先知道自己的状态，所以我认为最好从

getInitialState

函数返回数据

您还可以使用

componentDidMount

而不是

componentWillMount

函数。这样，您就可以确保在调用

componentDidMount

时安装组件

每当您使用asycn函数（如

settimeout

或xhr调用）时，您都应该在回调函数中使用

this.isMounted（）

，以检查组件在回调触发时是否仍已装入

例如，如果事先不知道状态，可以在

componentDidMount

函数中启动xhr调用，在成功回调中选中

this.isMounted（）

，然后

setState

---

至于

{this.props.title.description.country}

行上的错误：在初始渲染

时，this.state.data

（BookBox）是空对象，this.props.title（TestBox）也是空对象。访问空对象（

{}

）

title

属性是

未定义的

。没问题。访问

说明

也是

未定义的

。但是访问

未定义的
国家/地区是错误的。为避免此错误，您可以创建一个
description
变量：
description=this.props.title.description |{code>，并使用
{description.country}
确保在
this.props.title
为空时代码不会中断。
如果复制我的工作示例，并删除{this.props.title.title}
，渲染它没有问题，但是如果添加{this.props.title.description.country}
，它会崩溃，我不知道为什么…在初始渲染时，
this.state.data
（BookBox）是空对象，
this.props.title
（TestBox）也是空对象。访问空对象（
{}
）
title
属性是
未定义的
。没问题。访问
说明
也是
未定义的
。但是访问
undefined
的
country
是错误的。因为您事先知道初始状态，所以应该使用
getInitialState
函数。如果您不知道状态，可以在
componentDidMount
函数中启动xhr调用，在成功回调中选中
this.isMounted（）
，并
setState
。同样在
TestBox
组件中，我会执行
description=this.props.title.description |{}
和
{description.country}
如果
this.props.title
为空，请确保我的代码不会中断。@EviSong如果在XHR结果到达时卸载组件，我没有太多选择，只能什么也不做。该组件已从DOM中删除。启动新的xhr不会重新安装组件。组件无法自行安装。我认为您应该检查为什么该组件被其父组件卸载。可能将XHR调用向上移动到父组件，父组件将卸载该组件，并在结果到达时重新装载/更新它。