componentDidMount 内的“setState(...)：只能更新已安装或正在安装的组件”

Question

相关问题here，但我不确定如何调整该问题的解决方案。

我正在尝试为带有标签的登录页面创建一个可重用的组件。每个选项卡都是可重用组件的子组件，并且有自己的 store 定义为 prop：

<LandingPage>
    <LandingPage.Tab store={store1}/>
    <LandingPage.Tab store={store2}/>
    ...
    <LandingPage.Tab store={storeN}/>
</LandingPage>

我想在父组件挂载时从每个选项卡的存储中获取数据，以便在选项卡之间快速切换。在 componentDidMount 函数中，我遍历每个孩子并将孩子商店的 onChange 回调分配给一个匿名箭头函数：

var LandingPage = React.createClass({
    getInitialState: function () {
        return {
            data: [] /* each index will be an array of data for a different tab */
        };
    },
    componentDidMount: function () {
        var self = this;
        React.Children.forEach(this.props.children, function (child, index) {
            child.props.store.onChange(() => {
                self.setDataAtIndex(index, child.props.store.getData());
            });
        });
    },
    setDataAtIndex: function (index, newData) {
        var data = this.state.data.slice();
        data[index] = newData;
        this.setState({
            data: data
        });
    },
    ...
});

但是，当页面第一次加载时，我收到了来自 React 的警告消息：

警告：setState(...)：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个无操作。请检查 LandingPage 组件的代码。

我很困惑，因为我认为如果我在 componentDidMount 函数中，我可以假设组件已安装。当我刷新页面时，此警告消息就会消失。

有人可以解释这种行为并告诉我如何正确构造代码以消除警告消息吗？

Answer 1

这个函数...

() => { // this calls setState
    self.setDataAtIndex(index, child.props.store.getData());
}

无论LandingPage 组件是否已安装，每次选项卡存储更改时都会调用。那是个问题。当LandingPage 卸载时，您需要告诉商店停止调用此函数。在不修改存储的情况下，您可以使用无操作覆盖更改侦听器，如下所示...

componentWillUnmount: function () {
    var self = this;
    React.Children.forEach(this.props.children, function (child, index) {
        child.props.store.onChange(() => {});
    });
}

现在，当组件没有挂载时，应该调用() => {}，而不是调用setState，因此是无害的

Answer 2

虽然查理马丁的回答是一个聪明的解决方法，但我最终决定将回调存储在一个状态变量中，类似于我链接到的相关问题。这是更新的代码：

var LandingPage = React.createClass({
    getInitialState: function () {
        return {
            data: [] /* each index will be an array of data for a different tab */
            callbacks: [] /* each index will store a callback reference */
        };
    },
    componentDidMount: function () {
        var self = this;
        React.Children.forEach(this.props.children, function (child, index) {
            var fn = function() {
                self.setDataAtIndex(index, child.props.store.getAll());
            };
            child.props.store.onChange(fn);
            self.saveCallback(index, fn);
        });
    },
    componentWillUnmount: function () {
        var self = this;
        React.Children.forEach(this.props.children, function (child, index) {
            child.props.store.offChange(self.state.callbacks[index]);
        });
    },
    saveCallback: function (index, fn) {
        var callbacks = this.state.callbacks;
        callbacks[index] = fn;
        this.setState({
            callbacks: callbacks
        });
    },
    ...
});

作为参考，onChange() 和 offChange() 定义为：

function onChange(callback) {
    this.on('change', callback);
}
function offChange(callback) {
    this.removeListener('change', callback);
}