大家好，我是 CUGGZ。

發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務(wù)至上”的服務(wù)理念，堅(jiān)持“二合一”的優(yōu)良服務(wù)模式，真誠服務(wù)每家企業(yè)，認(rèn)真做好每個細(xì)節(jié)，不斷完善自我，成就企業(yè)，實(shí)現(xiàn)共贏。行業(yè)涉及成都自上料攪拌車等，在成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。

今天來分享在 React 開發(fā)中常見的一些錯誤，以及如何避免這些錯誤。理解這些問題背后的細(xì)節(jié)，防止犯下類似的錯誤。

1. 組件卸載后執(zhí)行狀態(tài)更新

 Can’t perform a React state update on an unmounted component

這個報(bào)錯就是因?yàn)樵诮M件樹的某個地方，狀態(tài)更新被觸發(fā)到已經(jīng)卸載的組件上了。也就是說，我們不能在組件銷毀后更新 state，防止出現(xiàn)內(nèi)存泄漏。

const Component = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchAsyncData().then((data) => setData(data));
  }, []);

  
};

比如，在請求數(shù)據(jù)時(shí)，由于跳轉(zhuǎn)到了B頁面，A頁面的數(shù)據(jù)請求還在進(jìn)行中，但是頁面已經(jīng)銷毀了，就會出現(xiàn)這種情況。那該如何解決這個問題呢？有兩種方法：

（1）組件卸載時(shí)取消異步請求

第一種方法（推薦），就是在組件卸載時(shí)取消異步請求。一些異步請求庫提供了取消異步請求的方法。如果沒有使用第三方庫，可以使用 AbortController 來取消。這種方法本質(zhì)上就是在組件卸載時(shí)取消副作用：

const Component = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    fetch(url, { signal: controller.signal }).then((data) => setData(data));
    return () => {
      controller.abort();
    }
  }, []);

  
};

（2）跟蹤組件是否已掛載

另外，可以跟蹤組件的掛載狀態(tài)，如果還沒掛載或已經(jīng)卸載，返回 false；否則返回 true：

const Component = () => {
  const [data, setData] = useState(null);
  const isMounted = useRef(true);

  useEffect(() => {
    fetchAsyncData().then(data => {
      if(isMounted.current) {
        setData(data);
      }
    });

    return () => {
      isMounted.current = false;
    };
  }, []);

  
}

不過，不建議使用這種方法。這樣保留了未掛載組件的引用，可能會導(dǎo)致內(nèi)存泄漏和性能問題。

2. 渲染列表時(shí)不使用 key

 Warning: Each child in a list should have a unique key prop

React 開發(fā)中最常見的就是遍歷數(shù)組來渲染組件。在JSX中，可以使用Array.map將該邏輯嵌入到組件中，并在回調(diào)中返回所需的組件。如下：

import { Card } from "./Card";

const data = [
  { id: 1, text: "JavaScript" },
  { id: 2, text: "TypeScript" },
  { id: 3, text: "React" }
];

export default function App() {
  return (
    

      {data.map((content) => (
        

          
        

      ))}
    

  );
}

這樣會收到如下警告：Warning: Each child in a list should have a unique key prop?，這表示需要給生成的每個組件一個唯一的key。所以，要在map?回調(diào)返回的JSX的最外層元素添加一個key值，該值應(yīng)該是一個字符串或者數(shù)字，并且在這個組件列表中應(yīng)該是唯一的。

export default function App() {
  return (
    

      {data.map((content) => (
        

          
        

      ))}
    

  );
}

盡管不遵守這個要求也不會導(dǎo)致應(yīng)用崩潰，但它可能會導(dǎo)致一些意外的情況。React 會使用這些key來確定列表中的哪些子項(xiàng)發(fā)生了更改，并使用此信息來確定可以重用先前 DOM 的哪些部分，以及在重新渲染組件時(shí)應(yīng)該重新計(jì)算哪些部分。因此，建議添加 key。

3. Hooks 調(diào)用順序錯誤

 React Hook "useXXX" is called conditionally. React Hooks must be called in the exact same order in every component render

先來看下面的代碼：

const Toggle = () => {
  const [isOpen, setIsOpen] = useState(false);

  if (isOpen) {
    return 
{}
;
  }
  const openToggle = useCallback(() => setIsOpen(true), []);
  return {/* ... */};
};

當(dāng) isOpen? 的值為true?時(shí)，就會直接return?那個div?元素。這樣當(dāng)isOpen?的值為true和false時(shí)useCallback? Hook的調(diào)用順序就不一致了。這時(shí)React就會警告我們：React Hook "useCallback" is called conditionally. React Hooks must be called in the exact same order in every component render。這其實(shí)就是React官方文檔中所說的，。遵守這條規(guī)則才能確保 Hook 在每一次渲染中都按照同樣的順序被調(diào)用。

可以這樣來修改上面的代碼：

const Toggle = () => {
  const [isOpen, setIsOpen] = useState(false);
  const openToggle = useCallback(() => setIsOpen(true), []);

  if (isOpen) {
    return 
{/* ... */}
;
  }
  return {/* ... */};
};

4. useEffect 缺少依賴

 React Hook useEffect has a missing dependency: 'XXX'. Either include it or remove the dependency array

先來看看 React 官網(wǎng)給出的例子：

function Example({ someProp }) {
  function doSomething() {
    console.log(someProp);
  }

  useEffect(() => {
    doSomething();
  }, []); 
}

在useEffect?中定義空的依賴數(shù)組是不安全，因?yàn)樗{(diào)用的 doSomething? 函數(shù)使用了 someProp?。這時(shí)就會報(bào)錯：React Hook useEffect has a missing dependency: 'XXX'. Either include it or remove the dependency array?。當(dāng)props?中的someProp?發(fā)生變化時(shí)，函數(shù)doSomething?的結(jié)果就會發(fā)生變化，然而useEffect的依賴數(shù)組為空，所以就不會執(zhí)行回調(diào)中的內(nèi)容。

有兩種方式來解決這個問題：

• 在useEffect中聲明其所需函數(shù)，這種方式適用于只需要調(diào)用一次的函數(shù)，比如初始化函數(shù)：

function Example({ someProp }) {
  useEffect(() => {
    function doSomething() {
      console.log(someProp);
    } 
    doSomething();
  }, [someProp]); 
}

• 使用useCallback來定義依賴項(xiàng)，確保當(dāng)自身依賴發(fā)生改變時(shí)函數(shù)主體也會改變：

function Example({ someProp }) {
  const doSomething = useCallback(() => {
    console.log(someProp);
  }, [someProp])

  useEffect(() => {
    doSomething();
  }, [doSomething]); 
}

5. 重新渲染過多

 Too many re-renders. React limits the number of renders to prevent an infinite loop

這個報(bào)錯就是說重新渲染過多。React 限制渲染的數(shù)量以防止無限循環(huán)。當(dāng)組件在很短的時(shí)間有太多狀態(tài)更新時(shí)，就可能會發(fā)生這種情況。導(dǎo)致無限循環(huán)的最常見原因是：

• 直接在渲染中執(zhí)行狀態(tài)更新；
• 未向事件處理程序提供適當(dāng)?shù)幕卣{(diào)。

如果遇到這個警告，可以檢查組件的這兩個方面：

const Component = () => {
  const [count, setCount] = useState(0);

  setCount(count + 1); // 渲染中的狀態(tài)更新

  return (
    

      {/* onClick 沒有正確的回調(diào) */}
       prevCount + 1)}>
        Increment that counter
      
    

  );
}

6. 渲染的單條數(shù)據(jù)為對象

 Objects are not valid as a React child / Functions are not valid as a React child

在 React 中，我們可以在組件中渲染到 DOM 中的東西有很多，比如：HTML標(biāo)簽、JSX元素、原始 JavaScript 值、JavaScript 表達(dá)式等。但是不能將對象和函數(shù)渲染到 DOM 中，因?yàn)檫@兩個值不會解析為有意義的值，如果渲染了對象或函數(shù)，就會報(bào)上面的錯誤。解決這個問題的方法很簡單，就是檢查渲染的內(nèi)容是否是有效的值：

const Component = ({ body }) => (
  

    
{/* */}

    {/* 必須確保 body 是有效的 React child */}
    
{body}

  

);

7. 相鄰JSX元素沒有包裝在封閉標(biāo)記中

 Adjacent JSX elements must be wrapped in an enclosing tag

這個報(bào)錯就是說相鄰JSX元素必須包裝在封閉標(biāo)記中，也就是必須要有一個根元素：

const Component = () => (
  
  
);

從 React 開發(fā)人員的角度來看，這個組件只會在另一個組件內(nèi)部使用。因此，在他們的心智模型中，從一個組件返回兩個元素是有意義的，因?yàn)樯傻?DOM 結(jié)構(gòu)將是相同的，無論外部元素是在此組件中定義還是在父組件中定義。但是，React 無法做出這種假設(shè)。該組件可能會在根目錄中使用并破壞應(yīng)用，因?yàn)樗鼤?dǎo)致無效的 DOM 結(jié)構(gòu)。

所以，應(yīng)該始終將組件返回的多個 JSX 元素包裝在一個封閉標(biāo)記中?？梢允且粋€元素、一個組件或者 React Fragment：

const Component = () => (
  
    
   
  
);

或者直接使用一個空標(biāo)簽來包裝兩個 JSX 元素：

const Component = () => (
  <>
    
   
  
);

8. 使用舊的狀態(tài)

先來看一個計(jì)數(shù)器的例子：

const Increaser = () => {
  const [count, setCount] = useState(0);
  
  const increase = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  
  const handleClick = () => {
    increase();
    increase();
    increase();
  };
  
  return (
    <>
      +
      
Counter: {count}

    
  );
}

這里的handleClick?方法會在點(diǎn)擊按鈕后執(zhí)行三次增加狀態(tài)變量count?的操作。那么點(diǎn)擊一次是否會增加3呢？事實(shí)并非如此。點(diǎn)擊按鈕之后，count只會增加1。問題就在于，當(dāng)我們點(diǎn)擊按鈕時(shí)，相當(dāng)于下面的操作：

const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
};

當(dāng)?shù)谝淮握{(diào)用setCount(count + 1)?時(shí)是沒有問題的，它會將count?更新為1。接下來第2、3次調(diào)用setCount?時(shí)，count?還是使用了舊的狀態(tài)（count為0），所以也會計(jì)算出count為1。發(fā)生這種情況的原因就是狀態(tài)變量會在下一次渲染才更新。

解決這個問題的辦法就是，使用函數(shù)的方式來更新狀態(tài)：

const Increaser = () => {
  const [count, setCount] = useState(0);
  
  const increase = useCallback(() => {
    setCount(count => count + 1);
  }, [count]);
  
  const handleClick = () => {
    increase();
    increase();
    increase();
  };
  
  return (
    <>
      +
      
Counter: {count}

    
  );
}

這樣改完之后，React就能拿到最新的值，當(dāng)點(diǎn)擊按鈕時(shí)，就會每次增加3。所以需要記?。?/p>

setValue(prevValue => prevValue + someResult)

網(wǎng)站題目：React中常見的八個錯誤，如何避免？
文章鏈接：http://fisionsoft.com.cn/article/cccidec.html