解決 React 中的 “Too many re-renders” 錯誤：2025 最新解決方案

作者:

解決 React 中的 Too many re-renders 錯誤

目錄

解決 React 中的 “Error: Too many re-renders” 錯誤

React 是一個由 Facebook 開發的 JavaScript 函式庫，專門用於建立用戶端的網頁應用程式。它的高效能和可重用性使得開發者能夠快速構建複雜的應用程式。然而，在開發過程中，開發者可能會遇到 “Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.” 這個錯誤訊息，這通常是由於組件的狀態或屬性在渲染過程中不斷改變，導致無限循環。

為什麼會出現這個錯誤？

當 React 偵測到組件的重新渲染次數超過預設限制時，就會觸發這個錯誤。這通常發生在以下情況：

  • 組件的狀態（state）或屬性（props）在 render 方法中被不斷更新。
  • 使用了不當的邏輯，導致狀態變更的反覆發生。

解決方法

為了解決這個問題，開發者可以採取以下步驟：

1. 檢查狀態更新邏輯

首先，檢查組件中狀態更新的邏輯。確保狀態更新的觸發不會在 render 方法內進行。例如：

class MyComponent extends React.Component {
    state = { count: 0 };

    render() {
        this.setState({ count: this.state.count + 1 }); // 錯誤的做法
        return <div>{this.state.count}</div>;
    }
}

上述代碼會導致無限重新渲染，因為在 render 方法內部不應該進行狀態更新。

2. 使用 useEffect 鉤子

如果您使用的是函數組件，可以使用 useEffect 鉤子來控制狀態更新。示例代碼如下：

import React, { useState, useEffect } from 'react';

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

    useEffect(() => {
        setCount(count + 1);
    }, []); // 空依賴陣列，確保只在組件掛載時更新

    return <div>{count}</div>;
};

3. 使用 shouldComponentUpdate 方法

在類組件中，可以利用 shouldComponentUpdate 方法來控制組件的更新。這樣可以避免不必要的重新渲染：

class MyComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return this.props.value !== nextProps.value;
    }

    render() {
        return <div>{this.props.value}</div>;
    }
}

總結

React 的 “Error: Too many re-renders” 錯誤提示開發者存在無限渲染的情況。通過檢查狀態更新邏輯、使用 useEffect 鉤子或 shouldComponentUpdate 方法，開發者可以有效地避免這個問題，確保應用正常運作。

Q&A（常見問題解答）

Q1: 如何確定是在哪行代碼造成的無限渲染錯誤？

A1: 您可以使用瀏覽器的開發者工具，檢查正在執行的函數和組件，找到導致狀態不斷更新的代碼行。

Q2: useEffect 和 shouldComponentUpdate 哪個更好？

A2: useEffect 在函數組件中更為簡潔且易於使用，而 shouldComponentUpdate 是類組件的選擇。選擇取決於您使用的組件類型。

Q3: 還有其他技巧可以避免這個錯誤嗎？

A3: 確保避免在 render 方法中直接修改狀態，並合理使用 React 的生命周期方法和鉤子。

—

發佈留言