React 中常見的 8 個錯誤，如何避免？

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

1. 組件卸載后執(zhí)行狀態(tài)更新
報錯信息： Can’t perform a React state update on an unmounted component

這個報錯就是因為在組件樹的某個地方，狀態(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ù)時，由于跳轉(zhuǎn)到了B頁面，A頁面的數(shù)據(jù)請求還在進行中，但是頁面已經(jīng)銷毀了，就會出現(xiàn)這種情況。那該如何解決這個問題呢？有兩種方法：

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

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. 渲染列表時不使用 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 (
    <div className="container">
      {data.map((content) => (
        <div className="card">
          <Card text={content.text} />
        </div>
      ))}
    </div>
  );
}
這樣會收到如下警告：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 (
    <div className="container">
      {data.map((content) => (
        <div key={content.id} className="card">
          <Card text={content.text} />
        </div>
      ))}
    </div>
  );
}
盡管不遵守這個要求也不會導(dǎo)致應(yīng)用崩潰，但它可能會導(dǎo)致一些意外的情況。React 會使用這些key來確定列表中的哪些子項發(fā)生了更改，并使用此信息來確定可以重用先前 DOM 的哪些部分，以及在重新渲染組件時應(yīng)該重新計算哪些部分。因此，建議添加 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 <div>{/* ... */}</div>;
  }
  const openToggle = useCallback(() => setIsOpen(true), []);
  return <button onClick={openToggle}>{/* ... */}</button>;
};
當(dāng) isOpen 的值為true時，就會直接return那個div元素。這樣當(dāng)isOpen的值為true和false時useCallback Hook的調(diào)用順序就不一致了。這時React就會警告我們：React Hook "useCallback" is called conditionally. React Hooks must be called in the exact same order in every component render。這其實就是React官方文檔中所說的，不要在循環(huán)，條件或嵌套函數(shù)中調(diào)用 Hook， 確?？偸窃?React 函數(shù)的最頂層以及任何 **return** 之前調(diào)用他們。遵守這條規(guī)則才能確保 Hook 在每一次渲染中都按照同樣的順序被調(diào)用。

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

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

  if (isOpen) {
    return <div>{/* ... */}</div>;
  }
  return <button onClick={openToggle}>{/* ... */}</button>;
};
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ù)組是不安全，因為它調(diào)用的 doSomething 函數(shù)使用了 someProp。這時就會報錯：React Hook useEffect has a missing dependency: 'XXX'. Either include it or remove the dependency array。當(dāng)props中的someProp發(fā)生變化時，函數(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來定義依賴項，確保當(dāng)自身依賴發(fā)生改變時函數(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

這個報錯就是說重新渲染過多。React 限制渲染的數(shù)量以防止無限循環(huán)。當(dāng)組件在很短的時間有太多狀態(tài)更新時，就可能會發(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 (
    <div className="App">
      {/* onClick 沒有正確的回調(diào) */}
      <button onClick={setCount((prevCount) => prevCount + 1)}>
        Increment that counter
      </button>
    </div>
  );
}
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 表達式等。但是不能將對象和函數(shù)渲染到 DOM 中，因為這兩個值不會解析為有意義的值，如果渲染了對象或函數(shù)，就會報上面的錯誤。解決這個問題的方法很簡單，就是檢查渲染的內(nèi)容是否是有效的值：

const Component = ({ body }) => (
  <div>
    <h1>{/* */}</h1>
    {/* 必須確保 body 是有效的 React child */}
    <div className="body">{body}</div>
  </div>
);
7. 相鄰JSX元素沒有包裝在封閉標(biāo)記中
報錯信息： Adjacent JSX elements must be wrapped in an enclosing tag

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

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

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

const Component = () => (
  <React.Fragment>
    <Nice />
   <Bad />
  </React.Fragment>
);
或者直接使用一個空標(biāo)簽來包裝兩個 JSX 元素：

const Component = () => (
  <>
    <Nice />
   <Bad />
  </>
);
8. 使用舊的狀態(tài)
先來看一個計數(shù)器的例子：

const Increaser = () => {
  const [count, setCount] = useState(0);
 
  const increase = useCallback(() => {
    setCount(count + 1);
  }, [count]);
 
  const handleClick = () => {
    increase();
    increase();
    increase();
  };
 
  return (
    <>
      <button onClick={handleClick}>+</button>
      <div>Counter: {count}</div>
    </>
  );
}
這里的handleClick方法會在點擊按鈕后執(zhí)行三次增加狀態(tài)變量count的操作。那么點擊一次是否會增加3呢？事實并非如此。點擊按鈕之后，count只會增加1。問題就在于，當(dāng)我們點擊按鈕時，相當(dāng)于下面的操作：

const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
};
當(dāng)?shù)谝淮握{(diào)用setCount(count + 1)時是沒有問題的，它會將count更新為1。接下來第2、3次調(diào)用setCount時，count還是使用了舊的狀態(tài)（count為0），所以也會計算出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 (
    <>
      <button onClick={handleClick}>+</button>
      <div>Counter: {count}</div>
    </>
  );
}
這樣改完之后，React就能拿到最新的值，當(dāng)點擊按鈕時，就會每次增加3。所以需要記?。喝绻褂卯?dāng)前狀態(tài)來計算下一個狀態(tài)，就要使用函數(shù)的式方式來更新狀態(tài)：

setValue(prevValue => prevValue + someResult)




作者：CUGGZ


歡迎關(guān)注微信公眾號 ：前端快快跑