React Route 警告：在渲染不同的组件（`Context.Consumer`）时无法更新组件（`App`）答案

【问题标题】：React Route Warning: Cannot update a component (`App`) while rendering a different component (`Context.Consumer`)React Route 警告：在渲染不同的组件（`Context.Consumer`）时无法更新组件（`App`）
【发布时间】：2021-03-29 22:08:37
【问题描述】：

我有私人路线。当用户未登录或未验证电子邮件时，重定向到带有警告的模式登录。它由函数 show modal 运行，但出现错误。这是工作，通过它在开发中显示这个错误。在产品中，我没有收到此错误。

警告：

index.js:1 警告：渲染时无法更新组件 (App) 一个不同的组件 (Context.Consumer)。定位不良 setState() 在Context.Consumer 中调用，按照堆栈跟踪为描述于在路线中（在 PrivateRoute.js:13）在 PrivateRoute (在 App.js:217) 在 Switch 中（在 App.js:196 处）在路由器中（由 BrowserRouter 创建）在 BrowserRouter (在 App.js:140) 在 div 中（在 App.js:139 处）在应用程序中（在 src/index.js:11）在提供者中（在 src/index.js:10）

代码：

  <Route
  {...rest}
  render={(props) =>
    (user && user.providerId && user.providerId !== 'password') ||
    (user &&
      user.providerId &&
      user.providerId === 'password' &&
      user.emailVerified) ? (
      <Component {...props} />
    ) : (
      <Redirect to="/">{setLoginModalShow(true)}</Redirect>
    )
  }
/>

我应该怎么做请帮忙

【问题讨论】：

标签： reactjs redirect react-router

【解决方案1】：

不要在重定向时调用 setLoginModalShow(true)，而是尝试下面的方法，在重定向到主页时传递一些标志作为操作，并在主页上从路由器检查该标志并使用它来显示登录模式

<Redirect
  to={{
    pathname: "/",
    state: { action:  "showLogin" }
  }}
/>

【讨论】：

它可以工作，但会出现同样的错误。此警告在两种解决方案中仅出现一次
在上面的解决方案中，你在哪里调用 setLoginModalShow 函数？
这是在 App.js 中运行的
我认为当您在 app.js 中调用 setstate 而路由重定向到另一个组件时，这意味着在 app.js 中调用 setstate 时正在渲染主组件，您可以尝试在主组件中调用 setstate而不是app.js，或者使用上下文api从主页组件而不是app.js调用setstate调用函数，您的模态逻辑将仅在app.js中，但将从主页组件调用。