javascript - 在挂载之前 react 处理空对象的最佳方法？

Question

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

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

但是，当 React 想要渲染它时，它会报错。

Uncaught Error :不变违规:receiveComponent(...):只能更新已安装的组件

我认为问题出在 getInititalState，我将我的数据声明为一个空对象，所以当我在超时后获得我的完整数据对象时，React 将尝试将我的数据对象映射到组件，但它给出了错误。

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

但是，当我对它进行 console.log 时，我可以看到我的对象。但是 React 无法访问它!

我的猜测是，当 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>
        );
    }
})

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

Answer 1

我想你得到了 Can only update a mounted component错误，因为您正在使用 componentWillMount和 settimeout在一起，但您不知道该组件是否已在时间 settimeout 之前安装函数触发。

既然你事先知道你的状态是什么，我认为最好从getInitialState返回你的数据。功能。

您还可以使用 componentDidMount而不是 componentWillMount功能。这样你就可以确定组件在 componentDidMount 时被挂载了。被称为。

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

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

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