如何解決 React 中的「無法在渲染不同元件時更新元件」錯誤

一個解決 React 錯誤的快速指南

在開發 React / Next.js 應用程式時，我遭遇了以下錯誤：

無法在渲染不同元件時更新元件 (Cannot update a component ('App') while rendering a different component)

我進行了相關研究，但所找到的資料中有很多混淆的內容。

以下是我的處理方式：我在 App 元件中管理一個集中式狀態：

function MyApp({ Component, pageProps }) {
 const [lessonsRead, setLessonsRead] = useState()

 return (
 <Component
 lessonsRead={lessonsRead}
 setLessonsRead={setLessonsRead}
 {...pageProps}
 />
 )
}

在 Next.js 的頁面元件中，我呼叫 setLessonsRead 方法，以 SWR（fetch）呼叫的結果為基準，將資料填充到這個狀態中：

if (courseData && courseData.lessonsRead) {
 setLessonsRead(courseData.lessonsRead)
}

我將這段程式碼直接放在元件中。

為了解決這個問題，我必須使用 useEffect 將這段程式碼包裹起來，只在資料變動時執行，而不是在每次元件屬性更新時都執行：

useEffect(() => {
 if (courseData && courseData.lessonsRead) {
 setLessonsRead(courseData.lessonsRead)
 }
}, [courseData])