在挂载之前反应处理空对象的最佳方法？

Question

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

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

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

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

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

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

但是，当我 console.log 它时，我可以看到我的对象。但是 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，但您不知道组件是否已在 [=12= 时安装] 函数触发。

既然你事先知道你的状态，我认为最好从 getInitialState 函数中 return 你的数据。

您也可以使用 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(TestBox) 也是。访问空对象的 ({ }) title 属性是 undefined。没问题。访问 description 也是 undefined。但是访问 undefined 的 country 是错误的。为避免此错误，您可以创建一个 description 变量：description = this.props.title.description || {} 并使用 <p>{description.country}</p> 以确保如果 this.props.title 为空，您的代码不会中断。

在挂载之前反应处理空对象的最佳方法？

React best way to handle empty object before mount?

javascript

reactjs