Javascript 呈现其他组件时无法更新组件.要定位错误的setState()调用，请遵循堆栈跟踪，如下所述

所以我一直在寻找答案，但在大多数情况下，只是拼写错误或把电话放错了地方，我相信这里不是这样的.不知何故，我发现这是一种难以理解的react 逻辑.

我使用的是This type of React Router，我正在try 为Outlet提供一组数据，当用户在children网站上时，这些数据可以更改.我决定try React Providers而不是Reaction-Router工具useOutletContext，因为提供的数据可能会随着时间的推移而增长.我决定沿着This进场.

所以这就是代码. App.jsx

const App = () => {
  return (
    <AuthProvider>
      <Suspense fallback={<Loading />}>
        <Routing />
      </Suspense>
    </AuthProvider>
  )
}

Routing.jsx

const BrowserRouter = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" name="home" element={<HomePage />}>
      <Route path="device" name="device" element={<DevicePage />}>
        <Route path=":id" element={<DeviceList />}></Route>
      </Route>
      <Route path="*" element={<Roadblock.site404 />} />
    </Route>,
  ),
)

export default const Routing = () => {
  return <RouterProvider router={BrowserRouter} fallbackElement={<Loading />} />
}

DevicePage.jsx

export default function DevicePage() {
  return (
    <>
      <DeviceContent />
    </>
  )
}

DeviceContent.jsx

export default function DeviceContent() {
  return (
    <>
      <DeviceProvider>
        <Outlet />
      </DeviceProvider>
    </>
  )
}

DeviceProvider.jsx

export const DeviceContext = createContext()

export function DeviceProvider({ children }) {
  const [device, setDevice] = useState(null)

  const addDevice = () => {
    setDevice(data)
  }

  const deviceContext = {
    device,
    addDevice,
  }

  return <DeviceContext.Provider value={deviceContext}>{children}</DeviceContext.Provider>
}

下面是Route中调用的Outlet个DeviceList.jsx

export default function DeviceList() {
  const { device, addDevice } = useContext(DeviceContext)

  addDevice('1')
  console.log(device)

  return (
    <div>
      <h2>{device}</h2>
    </div>
  )
}

错误代码

react-dom.development.js:86 Warning: Cannot update a component (DeviceProvider) while rendering a different component (DeviceList). To locate the bad setState() call inside
DeviceList, follow the stack[...]

Question:是什么行为/逻辑导致了这个问题？我将来如何理解和避免它？