快捷導(dǎo)航

Can't?perform?a?React?state?update?on?an?unmounted?component報(bào)錯(cuò)解決

更新時(shí)間：2022年12月05日 10:05:01 作者：Borislav?Hadzhiev

這篇文章主要為大家介紹了Can't?perform?a?React?state?update?on?an?unmounted?component報(bào)錯(cuò)解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

為了解決"Warning: Can't perform a React state update on an unmounted component" ，可以在你的useEffect鉤子中聲明一個(gè)isMounted布爾值，用來跟蹤組件是否被安裝。一個(gè)組件的狀態(tài)只有在該組件被掛載時(shí)才會(huì)被更新。

import {useState, useEffect} from 'react';
const App = () => {
  const [state, setState] = useState('');
  useEffect(() => {
    // ??? set isMounted to true
    let isMounted = true;
    async function fetchData() {
      const result = await Promise.resolve(['hello', 'world']);
      // ??? only update state if component is mounted
      if (isMounted) {
        setState(result);
      }
    }
    fetchData();
    return () => {
      // ??? when component unmounts, set isMounted to false
      isMounted = false;
    };
  }, []);
  return (
    <div>
      <h2>State: {JSON.stringify(state)}</h2>
    </div>
  );
};
export default App;

當(dāng)我們?cè)噲D更新一個(gè)未掛載的組件的狀態(tài)時(shí)，會(huì)出現(xiàn)"無法在未掛載的組件上執(zhí)行React狀態(tài)更新"的警告。

isMounted

擺脫該警告的直截了當(dāng)?shù)姆绞绞牵?code>useEffect鉤子中使用isMounted布爾值來跟蹤組件是否被掛載。

在useEffect中，我們初始化isMounted布爾值為true。

我們的fetchData 函數(shù)執(zhí)行一些異步的任務(wù)，最常見的是一個(gè)API請(qǐng)求，并根據(jù)響應(yīng)來更新狀態(tài)。

然而，需要注意的是，我們只有當(dāng)isMounted變量被設(shè)置為true時(shí)，才會(huì)更新狀態(tài)。

async function fetchData() {
  const result = await Promise.resolve(['hello', 'world']);
  // ??? only update state if component is mounted
  if (isMounted) {
    setState(result);
  }
}

這可以幫助我們避免警告，因?yàn)槿绻M件沒有掛載，我們就不會(huì)更新狀態(tài)。

當(dāng)組件卸載時(shí)，從useEffect鉤子返回的函數(shù)會(huì)被調(diào)用。

return () => {
  // ??? when component unmounts, set isMounted to false
  isMounted = false;
};

我們?cè)O(shè)置isMounted變量為false，表示該組件不再掛載。如果fetchData函數(shù)在組件卸載時(shí)被調(diào)用，if代碼塊不會(huì)執(zhí)行是因?yàn)?code>isMounted設(shè)置為false。

async function fetchData() {
  const result = await Promise.resolve(['hello', 'world']);
  // ??? only update state if component is mounted
  if (isMounted) {
    setState(result);
  }
}

提取

如果經(jīng)常這樣做，可以將邏輯提取到可重用的鉤子中。

import {useState, useEffect, useRef} from 'react';
// ??? extract logic into reusable hook
function useIsMounted() {
  const isMounted = useRef(false);
  useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  });
  return isMounted;
}
const App = () => {
  const [state, setState] = useState('');
  // ??? use hook
  const isMountedRef = useIsMounted();
  useEffect(() => {
    async function fetchData() {
      const result = await Promise.resolve(['hello', 'world']);
      // ??? only update state if component is mounted
      if (isMountedRef.current) {
        setState(result);
      }
    }
    fetchData();
  }, [isMountedRef]);
  return (
    <div>
      <h2>State: {JSON.stringify(state)}</h2>
    </div>
  );
};
export default App;

useRef()鉤子可以傳遞一個(gè)初始值作為參數(shù)。該鉤子返回一個(gè)可變的ref對(duì)象，其.current屬性被初始化為傳遞的參數(shù)。

我們?cè)?code>useIsMounted鉤子中跟蹤組件是否被掛載，就像我們直接在組件的useEffect鉤子中做的那樣。

需要注意的是，在fetchData函數(shù)中，我們必須檢查isMountedRef.current 的值，因?yàn)?code>ref上的current屬性是ref的實(shí)際值。

翻譯原文鏈接：bobbyhadz.com/blog/react-…

以上就是Can't perform a React state update on an unmounted component報(bào)錯(cuò)解決的詳細(xì)內(nèi)容，更多關(guān)于React state update報(bào)錯(cuò)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: