Simple React Component State, setState(...): 只能更新一个挂载或挂载的组件

Question

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

我在 Stack Overflow 上阅读了很多这些解决方案，但仍然完全不知道为什么会发生这种情况以及如何解决这个问题。

我有我的图表组件，它呈现页面，组件已安装。当我将鼠标悬停在图表值 (onValueMouseOver) 上时，即出现错误。我只是不明白如果我能够将鼠标悬停在我的组件上，它是如何被视为未安装的。

我尝试创建一个单独的 this.mounted 变量，我将其设置为真/假，具体取决于 componentWillMount 和 componentWillUnmount，并且仅在它们为真时使用 setState。下面的代码输出“挂载”消息（绝不是“卸载”消息），但它在启动时输出到控制台的值“真”，我假设因为我在构造函数中绑定了这些方法。但是当我将鼠标悬停时，会记录“假”。它没有记录错误，但仍然没有设置值，我需要它来做。

如果能指导我以“正确的方式”来处理这种情况，我们将不胜感激。我已经在几个地方使用了这种精确的方法，并且在我更新我的一些库和 webpack 配置之前它们都可以正常工作。

这是我的代码。我正在使用react-vis。

class Chart extends Component {
  constructor(props) {
    super(props);
    this.mounted = false;
    this.state = {
      value: null
    };
    this.rememberValue = this.rememberValue.bind(this);
    this.forgetValue = this.forgetValue.bind(this);
  }

  componentWillMount() {
    console.log('mounting');
    this.mounted = true;
  }

  componentWillUnmount() {
    console.log('unmounting');
    this.mounted = false;
  }

  rememberValue(value) {
    console.log(this.mounted);
    if (this.mounted) {
      this.setState({value});
    }
  }

  forgetValue() {
    console.log(this.mounted);
    if (this.mounted) {
      this.setState({
        value: null
      });
    }
  }

  render() {
    const { series } = this.props;
    const { value } = this.state;
    return (
      <XYPlot />
        <LineMarkSeries
          data={series.data}
          onValueMouseOver={this.rememberValue}
          onValueMouseOut={this.forgetValue}
        />
        <XAxis />
        <YAxis />
        {value && <Hint value={value} {...this.props} />}
      </XYPlot>
    );
  }
}

Answer 1

Omar 的解决方案是正确的，但某些 linter 可能会因为您在渲染函数中创建匿名函数而生气（出于性能原因）。您还有 2 个其他性能更高的选项。

forgetValue = () => {
}

或

constructor() {
  this.forgetValue = this.forgetValue.bind(this)
}

两者都只会创建一个将在组件的整个生命周期中使用的函数实例。在处理程序中创建一个函数每次重新渲染时都会创建一个新实例。