当 React 组件被卸载/重用时，如何取消 Promise 中的下一个“then”？

Question

当 React 组件被卸载/重用时，我试图取消一个承诺。现在我面临一个问题，我可以在下面的小图中更好地解释：

** Promise 必须完成（执行 AJAX 请求并相应地更新 redux 存储）

组件已创建 => 已安装 => _onClick() 已触发 => Promise 开始 => 组件已卸载但已回收 => Promise 已完成 => 在回收的组件中调用 setState() 并以先前的错误状态重新渲染组件。

如何取消/中断/停止下一个“then”但仍执行 Promise？

...
    _onClick() {
        let dispatch = this.props.dispatch;

        if (!this.state.on) {
            API.On(dispatch, this.props.id).then(() => {
                this.setState({
                    on: true,
                })
            }).catch((error) => {
                this.setState({
                    on: false,
                })
            });
        } else {
            API.Off(dispatch, this.props.id).then(() => {
                this.setState({
                    on: false,
                });
            }).catch((error) => {
                this.setState({
                    on: true,
                })
            })
        }
    }
...

Answer 1

我在这里要做的只是在设置状态的承诺主体中添加一个条件。你可以使用 React 的生命周期钩子来跟踪元素当前是否在 DOM 中。

这是一个跟踪是否已安装的组件的快速示例：

class Test extends React.Component {
  render() {
    return (<p>hello</p>);
  }

  componentDidMount () {
    this.mounted = true
    console.log(`mounted: ${this.mounted}`)
  }

  componentWillUnmount () {
    this.mounted = false
    console.log(`mounted: ${this.mounted}`)
  }
}

现场示例：https://codepen.io/jenius/pen/MmjPJV

---

基于此，您应该能够在您的 Promise 处理程序中添加一个简单的 if/else 来解决您的问题！