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

Question

我有一个名为“Item”的组件，该组件在安装时创建并调用一个承诺。

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”的组件负责在屏幕上显示这些项目。 “列表”是“项目”组件的父项。

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（）被调用，但也运行已在移除的组件创建的承诺。

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

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