如何修复React中的“渲染其他组件时无法更新组件”错误

我如何解决令人困惑的React错误的快速指南

在React / Next.js应用程序上工作时，出现此错误：

Cannot update a component (`App`) while rendering a different component
I researched a bit how to solve this problem, but there was a lot of confusion in the material I found.


Here is what I was doing: I had a centralized state managed in the App component:


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

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



and in a Next.js page component I called setLessonsRead to populate this state with data, based on the result of a SWR (fetch) call:


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



I was doing this right inside the component.


To solve this problem I had to wrap this code in useEffect, to only run it when the data changed and not on every component props update:


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


  

  
Download my free React Handbook

  




More react tutorials:

在线技术百科！