相关疑难解决方法(0)

如果用户经过身份验证并可以通过React Context API访问它，我想保存一个简单的布尔值 + userID 。

许多指南用上下文提供者包装了他们的根组件。对我来说，包装整个应用程序似乎很浪费。另一方面，我需要在我的所有主页中提供此信息。

用 React Context Provider 包装整个应用程序会产生负面影响吗？

例子：

class App extends Component {
render() {
    return (
        <MyProvider>
            <div className="App">
                    <h1 className="App-title">Welcome to my web store</h1>
                <ProductList />
            </div>
        </MyProvider>
    );
}

}

我使用本指南作为参考。

我没有任何 React Redux 经验，所以这对于以前使用过这个框架的每个人来说可能都很自然。

研究 Google 后发现了许多关于如何实现 React Context 或使用 HOC 的指南，但我点击的 15 个指南并没有回答我的问题。

我将Gatsby用作静态网站生成器。我使用React Context API来存储用户已通过身份验证的信息。

在开发模式下，当我键入任何重定向到404错误页面的URL时，上下文数据将丢失。当我导航到有效页面时，以前登录的用户不再登录。

我之前从未使用过React Context，所以不确定如何处理。那是预期的行为吗？有什么方法可以保留用户特定的React Context？我是否需要从后端重新提供上下文？还是我只是犯了一个错误？最好的行动方针是什么？

我想以某种方式将上下文保留在浏览器中，直到会话超时。尚未执行来自后端的会话处理。

编辑：我刚刚用gatsby构建和gatsby服务测试了这一点。当重定向到404错误页面时，内置的gatsby网站会保留上下文。但是，当导航到完全不同的URL（例如www.google.com）时，上下文仍然丢失。

现在我的问题是：如何在不让用户再次手动登录的情况下为上下文提供登录信息？Cookie检查？抱歉，如果我要问一个明显的问题。我从未实现过会话或cookie。

这是我的AuthContextProvider包装器类：

import React from "react";

export const AuthContext = React.createContext();

export class AuthContextProvider extends React.Component {
  state = {
    authenticated: false,
    toggleLogin: () => {},
    userid: null,
  };

  render() {
    return (
      <AuthContext.Provider
        value={{
          authenticated: this.state.authenticated,
          userid: this.state.userid,
          toggleLogin: () => {
            const previousValueState = this.state.authenticated;
            this.setState(state => ({
              authenticated: !previousValueState,
              userid: 2,
            }));
          },
        }}
      >
        {this.props.children}
      </AuthContext.Provider>
    );
  }
}

我用Context Provider将整个应用程序包装在根布局中：

export default function RootLayout({ …