在 ReactJS 中卸载组件时取消Promise

IT技术 reactjs promise cancellation
2021-04-24 15:21:36

我有一个名为“Item”的组件，它在安装后创建并调用一个 promise。

class Item extends React.Component{
    constructor(props){
        super(props)
        this.onClick = this.onClick.bind(this)

        this.prom = new Promise((resolve, reject) => {
            setTimeout(() => resolve("PROMISE COMPLETED "+this.props.id),6000)
        })
    }

    componentDidMount(){
        this.prom.then((success) => {
            console.log(success)
        })
    }

    componentWillUnmount(){
       console.log("unmounted")
    }

    onClick(e){
        e.preventDefault()
        this.props.remove(this.props.id)
    }

    render(){
        return (
            <h1>Item {this.props.id} - <a href="#" onClick={this.onClick}>Remove</a></h1>
        )
    }
}

如您所见，promise 在调用后 6 秒调用了 resolve。

还有另一个名为“List”的组件负责在屏幕上显示这些项目。“List”是“Item”组件的父级。

class List extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            items : [1,2,3]
        }

        this.handleRemove = this.handleRemove.bind(this)
    }

    handleRemove(id){
        this.setState((prevState, props) => ({
            items : prevState.items.filter((cId) => cId != id)
        }));
    }

    render(){
        return (
            <div>
            {this.state.items.map((item) => (
                <Item key={item} id={item} remove={this.handleRemove}  />
            ))
            }
            </div>
        )
    }
}

ReactDOM.render(<List />,root)

在上面的例子中，它在屏幕上显示了三个项目。

在此处输入图片说明

如果我删除这些组件中的任何一个，将调用 componentWillUnmount()，但也会运行在已删除组件中创建的Promise。

例如，即使我删除了第二个项目，我也可以看到第二个项目的Promise正在运行。 

unmounted 
PROMISE COMPLETED 1 
PROMISE COMPLETED 2 
PROMISE COMPLETED 3

卸载组件时，我必须取消Promise。

4个回答

这个https://hshno.de/BJ46Xb_r7的变体似乎对我有用。我使用mounted实例变量创建了一个 HOC，并将所有异步组件包装在其中。

下面是我的代码大致的样子。

export function makeMountAware(Component) {
    return class MountAwareComponent extends React.Component {
        mounted = false;
        componentDidMount() {
            this.mounted = true;
        }
        componentWillUnmount() {
            this.mounted = false;
        }
        return (
            <Component 
                mounted = {this.mounted}
                {...this.props}
                {...this.state}
            />
        );
    }
}

class AsyncComponent extends React.Component {
    componentDidMount() {
        fetchAsyncData()
            .then(data => {
                this.props.mounted && this.setState(prevState => ({
                    ...prevState,
                    data
                }));
            });
    }
}
export default makeMountAware(AsyncComponent);

你不能取消原生 ES6 Promise。阅读更多https://medium.com/@benlesh/promise-cancellation-is-dead-long-live-promise-cancellation-c6601f1f5082

但是，您可以做的是使用非本地Promise库，例如Bluebird或Q，它们为您提供可以取消的Promise。

你可以做各种各样的事情。最简单的就是对rejectpromise：

this.prom = new Promise((resolve, reject) => {
     this.rejectProm = reject;
     ...
});

接着

componentWillUnmount(){
   if (this.rejectProm) {
      this.rejectProm();
      this.rejectProm = nil;
   }

   console.log("unmounted")
}

由于您在本示例中使用了超时，因此您应该在卸载时清除它。

class Item extends React.Component{
    constructor(props){
        super(props)
        this.onClick = this.onClick.bind(this)

        // attribute for the timeout
        this.timeout = null;

        this.prom = new Promise((resolve, reject) => {
          // assign timeout
          this.timeout = setTimeout(() => resolve("PROMISE COMPLETED "+this.props.id),6000)
        })
    }

    componentDidMount(){
        this.prom.then((success) => {
            console.log(success)
        })
    }

    componentWillUnmount(){
       // clear timeout
       clearTimeout(this.timeout);
       console.log("unmounted")
    }

我的猜测是这将导致拒绝，您将看不到该控制台日志。

其它你可能感兴趣的问题
上一篇第一次组装 Anet A6 打印机。只有风扇工作 下一篇如何在 React 中使用 HTML5 验证？