在安装之前反应处理空对象的最佳方法是什么？

Question

我有一个React类,它想要渲染如下所示的对象:

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

但是,当React想要呈现它时,它会产生错误.

未捕获错误:不变违规:receiveComponent(...):只能更新已安装的组件

我认为问题出在getInititalState中,我将我的数据声明为空对象,所以当我在超时后得到完整的数据对象时,React会尝试将我的数据对象映射到组件,但它会给出错误.

但有一件有趣的事情是,我没有问题访问this.props.title.title,但不是this.props.title.description.country,它会给出undefined

但是,当我调试它时,我可以看到我的对象.但是React无法访问它!

我的猜测是当React从空对象初始化时,它只会使用数据对象的第1级和第2级初始化虚拟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>
        );
    }
})

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

Answer 1

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

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

您也可以使用componentDidMount替代componentWillMount函数。这样您就可以确保组件在componentDidMount调用时已安装。

任何时候您使用 asycn 函数（例如settimeout或 xhr 调用）时，都应该this.isMounted()在回调函数中使用，以检查在回调触发时组件是否仍然已安装。

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

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