反应：是否可以通过将this.setState设置为空函数来防止卸载后的状态更新？

Question

我面临的问题是，网络回调正在尝试对已卸载组件的setState（）进行设置，并收到有关此无操作的默认控制台警告。

我无法跟踪为什么会发生卸载，但是我找到了一个解决方案，建议在componentWillUnmount（）中将函数设置为空。 它没有用，我测试了将this.setState设置为空。 见下文。

错误消失了，但我想问一问这是否是有效的解决方案。 这里的代码：

  componentDidMount() {
    this.fetchLogItems(10, 'recentChanges');
  }

  componentWillUnmount() {
    this.setState = () => {};
  }

  fetchLogItems = (limit, stateRef) => {
    let tmpObj = {};
    base.fetch('_changelogs', {
      context: this,
      then(data) {
        tmpObj[stateRef] = {...data}
        tmpObj.loading = false;
        this.setState({...tmpObj})
      },
      catch(err){console.error(err)}
    });
  };

Answer 1

两种选择：

• 确保您正在使用的任何帮助程序也允许使用“析构函数”（取消，我绝对更喜欢使用“取消”）
• 如果没有，那么您可以在课堂上引入一个“标志”

如果您的库允许“取消”，“销毁”或“清理”，那么您可以简单地执行以下操作：

componentWillUnmount() {
  base.cancelFetch(); // or something similar.
}

否则，您可以向您的组件引入类属性。 也许将其命名为isUnmounted 。 在componentWillUnmount ， this.isUmounted设置为true。 将this.setState调用包装在if -statement中，该语句检查isUnmounted是否为false，如果为false，则可以调用this.setState 。 这实际上是一种非常常见的模式。

它可以“ 感觉 ”丑，但是，通过事实上的，这种格局似乎阵营开发者惯用的。 如果不是这样，至少对于与您类似的问题，这是一种务实的解决方案。

constructor() {
  // HERE
  this.isUmounted = false;
}

componentDidMount() {
  this.fetchLogItems(10, 'recentChanges');
}

componentWillUnmount() {
  // HERE
  this.isUmounted = true;
}

fetchLogItems = (limit, stateRef) => {
  let tmpObj = {};
  base.fetch('_changelogs', {
    context: this,
    then(data) {
      tmpObj[stateRef] = {...data}
      tmpObj.loading = false;
      // WRAP THE `this.setState` here.
      if (!this.isUnmounted) {
        this.setState({...tmpObj})
      }
    },
    catch(err){console.error(err)}
  });
};

但是，我更喜欢使用支持取消的库和助手。 绝对可以保证一定程度的清理。 如果不取消，我们就有引入内存泄漏的风险。