React是装载前处理空对象的最佳方式

React best way to handle empty object before mount?

本文关键字：对象 最佳 方式 前处理 React      更新时间：2024-02-15

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

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

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

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

我认为问题出在getInitalState中，我将数据声明为空对象，因此当我在超时后获得完整的数据对象时，React会尝试将我的数据对象映射到组件，但会出错。

但有一件有趣的事是，我访问this.props.title.title没有问题，但不访问this.props.title.description.country，它会给出未定义的

但是，当我安慰日志时，我可以看到我的对象。但React无法访问它！

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

这就是为什么，当我尝试访问this.props.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>
        );
    }
})

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

我认为您收到了Can only update a mounted component错误，因为您同时使用了componentWillMount和settimeout，但您不知道在settimeout函数启动时组件是否已安装。

由于您事先知道自己的状态，我认为最好从getInitialState函数返回数据。

您也可以使用componentDidMount而不是componentWillMount函数。这样，您就可以确保在调用componentDidMount时安装组件。

任何时候，当您使用像settimeout或xhr调用这样的asycn函数时，都应该在回调函数中使用this.isMounted()，以检查在回调触发时组件是否仍处于挂载状态。

例如，如果您事先不知道状态，可以在componentDidMount函数中激发xhr调用，在success回调中检查this.isMounted()和setState。

至于<p>{ this.props.title.description.country }</p>行上的错误：在初始渲染时，this.state.data（BookBox）是一个空对象，this.props.title（TestBox）也是。访问空对象的（{ }）title属性是undefined。没问题。访问CCD_ 20也是CCD_。但是访问undefined的country是错误的。为了避免这个错误，您可以创建一个description变量：description = this.props.title.description || {}，并使用<p>{description.country}</p>来确保您的代码在this.props.title为空时不会中断。

相关文章：