问题标签 [use-context]

状态在页面上保存得很好，并且可以更改和交互，但是一旦我导航到另一个页面 - 状态就会重置

整个商店和 createContext 是

初始化状态

用于更改状态的按钮

为路由中呈现的元素提供上下文

在我从上下文访问状态的元素中

它总是 {isLoggedIn:false}

我想使用useContext()钩子，但它总是返回初始值，即“ Hello ”。

使用<messageContext.Consumer>没有问题。它返回“ Hi ”，但我想使用 useContext 挂钩。

使用时useContext()我得到一个空对象。

我创建了一个文件，其中包含我的 Context、Provider 和 Consumer

src/utils/notesContext.js

然后在我的索引文件中，我有以下内容

src/pages/index.js

我是否使用上下文或提供者错误地设置了某些内容？另一件值得一提的是，这是在 Gatsby 应用程序中，所以不确定这是否会导致我不知道的潜在问题。

提前致谢！

我有这个钩子，用来从useContext

使用Firebase.js

这是上下文提供者：

应用程序.js

然后我通过执行以下操作访问整个应用程序：

一些组件.ts

问题

在useFirebase.ts文件中，我null在React.createContext(null)

我怎样才能摆脱这种冲突？

注： props.firebase类型为firebase.app.App

我通常会打电话createContext，null这就是 Typescript 抱怨的原因。

下面的代码似乎可以解决问题，但我不想用{}null 代替。

export const FirebaseContext = React.createContext({} as firebase.app.App);

我对 useContext 钩子应该如何在“全局”状态下工作感到有点困惑。

这是我的 App.js：

以下是我的一个子组件的导入和设置语句：

我的 AuthContext 正在从设置中返回 AuthContext.Provider。

基本上 - 我使用 AuthContext 为组件提供基本的前端验证，然后使用后端验证该验证。

问题是当我在子组件中使用 useContext 挂钩时，它会在子组件中创建重复的上下文。由于我将其用于组件验证，因此在子组件中可访问这些方法会很有帮助，因此我可以根据用户访问等返回它的不同部分。

有没有办法在不实例化子组件内的新上下文的情况下访问全局上下文？我正在使用我遵循的教程中的这个上下文模板，虽然我理解了 useContext 的概念，但我似乎在这里缺少一个关键组件。

我想使用 useContext() 和 useReducer()，剥离 redux 以保存另一个包并学习一种新的状态管理方式。我击中了一个拦截器。

在reducer更新payload之后的登录页面。可以在下面的屏幕截图中看到。我可以看到 Context.Provider 和 reducer 值已更新，但如果我要 console.log('context') 我仍然会得到初始值。

我想在组件之间共享更新的有效负载是 localStorage 本地执行此操作的唯一方法吗？还是我在概念上遗漏了一些东西。

提前致谢。

这是我的 App.tsx

这是我的 AuthProvider：-

这是我的 authReducer：-

这是我的登录页面：-

我最近开始使用带有 useContext Hook 的 Context React Api。我观察到，当我们有一个状态变量即 const someState = useState(state, setState) 时，一些开发人员直接在提供程序值中传递 setSate，然后在子组件中调用它。这是一个好习惯吗？

当您不使用上下文时，您必须创建一个处理程序来“访问”子组件中的 setState。我仍在使用处理函数并将它们传递给提供者值，以便从子上下文中导入它们。

在上下文中传递 setState 是一个好习惯吗？我仍然有一些疑问，因为通常您不能将 setState 直接传递给组件。我应该考虑的性能或任何其他缺点是否有任何差异？

谢谢你。

所以我正在为我和我的朋友们开发一个电影应用程序。我之前有一篇关于类似问题的帖子，但我现在遇到了一个不同的问题，试图用 useContext 和数组更新我的 movieList 的状态

这是我的 useContext 数组结构：

我已经能够添加具有默认 id 和排名值的新电影，但我希望应用程序转到“投票”页面，我们都在该页面提交投票，并使用输入框更新电影排名值。

我不确定如何更新它的状态。我知道我必须使用 onChange 方法，但每次我调用 movieList 时，它都没有定义为数组

我正在尝试使用ReactJs中的ContextAPI在组件之间共享数据。但是我在使用它时卡住了。这个错误是：

这是我的代码。

文件 context.js

和文件 useContextApp.js

并在主页中使用它。

我正在尝试理解和练习 React 钩子。我有以下代码。

每当 setTimeout 中的 setTick 方法运行时，它基本上都会重新渲染 DisplayUser 组件。（我在 DisplayUser 组件中有一个控制台日志）。我的 DisplayUser 组件看起来像这样

有人可以向我解释为什么 useEffect 基本上是重新渲染我的上下文 api 消费者组件的这种行为吗？