如何解决React中 "Cannot update a component (`App`) while rendering a different component "的错误

快速指导我如何解决一个令人困惑的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（获取）调用的结果，用数据来填充这个状态。

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

我是在组件内部做这个的。

为了解决这个问题，我不得不把这段代码包在useEffect中，只在数据改变时运行，而不是在每个组件道具更新时运行。

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