Cách khắc phục lỗi "không thể cập nhật một thành phần trong khi hiển thị một thành phần khác" trong React

Hướng dẫn nhanh về cách tôi giải quyết một lỗi React khó hiểu

Trong khi làm việc trên ứng dụng React / Next.js, tôi gặp lỗi này:

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: