React setState只能更新已安装或安装的组件 [英] React setState can only update a mounted or mounting component

问题描述

我收到以下警告

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

"Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the ContactPage component."

当我最初进入联系页面时，第一次会很好。然后，如果我离开页面并返回，则会抛出警告。

When I initially go to the contact page the firs time it is fine. Then if I navigate off the page and go back the warning is thrown.

联系页面组件：

import React, { Component, PropTypes } from 'react';
import AppStore from '../../stores/AppStore';
import AppActions from '../../actions/AppActions';
import DataContent from './DataContent';

const title = 'Contact Us';


class ContactPage extends Component {

    constructor(props) {
        super(props);
        this.state = AppStore.getState();
        AppActions.getData();
    }

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired,
  };

  componentWillMount() {
    this.context.onSetTitle(title);
    AppStore.listen(this.onChange.bind(this));
}

componentWillUnmount() {
    AppStore.unlisten(this.onChange.bind(this));
}

onChange(state) {
    this.setState(state);
}

renderData() {
    return this.state.data.map((data) => {
        return (
            <DataContent key={data.id} data={data} />
        )
    })
}

  render() {
    return (
      <div className={s.root}>
        <div className={s.container}>
          <h1>{title}</h1>
          <div>
              { this.renderData() }
          </div>
        </div>
      </div>
    );
}

}

export default ContactPage;

当我输入调试器时，在联系页面加载时它会命中componentWillMount（）。当我离开联系页面时，它会命中componentWillUnmount（）。当我导航回页面时，它会再次命中componentWillMount（），然后在遇到onChange（状态）函数时抛出错误。

When I put debuggers in, on load of contact page it hits componentWillMount(). When I leave the contact page it hits componentWillUnmount(). When I navigate back to the page it hits componentWillMount() again and then throws the error when it hits the onChange(state) function.

推荐答案

问题是前一个组件实例的监听器仍然是已注册的。并且由于之前的实例不再安装，您会收到该错误。

The issue is that the listener of the previous component instance is still registered. And because the previous instance isn't mounted anymore, you get that error.

.bind 始终返回<强>新功能。所以如果你这样做

.bind always returns a new function. So if you do

AppStore.unlisten(this.onChange.bind(this));

然后你试图删除一个不存在的监听器（当然这是失败的）。它不删除您使用 AppStore.listen（this.onChange.bind（this））

then you are trying to remove a listener that doesn't exist (which fails of course). It does not remove the listener you registered with AppStore.listen(this.onChange.bind(this))

要解决此问题，您应该在构造函数中绑定处理程序一次：

To solve this, you should bind the handler once in the constructor:

this.onChange = this.onChange.bind(this);

然后使用 AppStore.listen（this.onChange）和 AppStore.unlisten（this.onChange）。

这篇关于React setState只能更新已安装或安装的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！