Reactコンポーネントがアンマウント/再利用されたときにPromiseで次の 'then'を取り消すにはどうしたらいいですか？

Question

Reactコンポーネントがアンマウント/再利用されているときに約束を取り消そうとしています。 > =マウント

**約束が

（AJAXリクエストを実行し、それに応じてReduxのストアを更新）を完了しなければならないコンポーネントが作成されます。今、私は私がより良いよりも少し下のグラフで説明することができ、問題に直面しています=> _onClick（）fired => Promise starts =>コンポーネントはアンマウントされますがリサイクルされます=> Promise finished =>はリサイクルされたコンポーネントでsetState（）を呼び出し、前のコンポーネントから間違った状態でrerendersします。

私はどのようにして中断/中断/次の「その時」を止めることができますが、依然としてプロミスを実行できますか？

... 
    _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

---

は、あなたが追加することができるはずあなたの約束のハンドラの中の簡単なif/elseがあなたの問題を解決する！