javascript - 当卸载/重用 React 组件时，如何取消 Promise 中的下一个 'then'？

Question

我试图在卸载/重新使用 React 组件时取消 promise 。现在我正面临一个问题，我可以在下面的小图中更好地解释:

** 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

我在这里要做的只是向设置状态的 promise 主体添加一个条件。您可以使用 React 的生命周期 Hook 来跟踪元素当前是否在 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 来解决您的问题!