反應更新未安裝的組件

Question

所以我有這個功能，可以從我的API獲取播放列表，然后更新狀態。

我的問題是，如果在API仍在提取數據的同時更改路由，即使不再安裝該組件，它也會嘗試更新該組件。 這將導致以下控制台錯誤：

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

我想知道避免這種沖突的最佳做法是什么。

預先感謝您的回答！

  async getUserPlaylists() { let data = await request({ path: '/playlists' }); data = data || []; const sanitizedPlaylists = data.map((item, index) => ({ key: index, name: item.name, imageUrl: item.imageUrl, ...item, })); this.setState({ playlists: sanitizedPlaylists, loadingPlaylists: false, submitting: false, }); return request.data; } 

Answer 1

您可以嘗試在componentWillUnmount終止請求，這將導致Promise無法解決：

this.request = request({ path: '/playlists' });
let data = await this.request;

componentWillUnmount() {
  if (this.request) this.request.abort();
}

或者，只需設置一個標志：

componentWillUnmount() {
  this.unmounted = true;
}

並在調用setState之前檢查它：

if (this.unmounted) return;
this.setState(...)

盡管所有這些可能都是不必要的並發症。 您可以忽略開發中的警告。