Question

我有一个名为“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>
        )
    }
}

如您所见，承诺在调用后6秒调用解决方案。

另一个名为“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。

例如，即使我删除了第二项，我也能看到第二项的承诺。

unmounted 
PROMISE COMPLETED 1 
PROMISE COMPLETED 2 
PROMISE COMPLETED 3

我必须在卸载组件时取消承诺。

Answer 1

您无法取消原生ES6承诺。阅读更多https://medium.com/@benlesh/promise-cancellation-is-dead-long-live-promise-cancellation-c6601f1f5082

然而，您可以使用的是非原生承诺库，例如Bluebird或Q，它们会为您提供可以取消的承诺。

Answer 2

你可以做很多事情。最简单的是reject承诺：

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

然后

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

   console.log("unmounted")
}

Answer 3

这个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);

Answer 4

由于在此示例中使用的是超时，因此在卸载时应将其清除。

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")
    }

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

在ReactJS中卸载组件时取消承诺

4 个答案: