问题标签 [use-context]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
54 浏览

reactjs - 试图转换成打字稿..无法弄清楚如何制作动作类型和有效负载..我正在使用useContext并使用Reducer

试图转换成打字稿..无法弄清楚如何制作动作类型和有效负载..我正在使用 useContext 并使用 Reducer 我基本上希望我的动作从提供的 ./types 的键中获取类型,然后找出方法提供pyaoad 这是我的状态

}

导出默认 AlertState

这是我的减速机

在此,我提供的操作类型是任何类型,但我希望它是来自 ./types 文件的类型

0 投票
2 回答
38802 浏览

reactjs - Typescript 给了我一个错误:Expected 0 arguments, but got 1

我想以正确的方式定义接口,但我遇到了麻烦,因为即使参数为空,它也需要一个参数。

我正在使用useContext并且我定义了这样的接口:

在提供者中,value是:

现在,我import将上下文添加到其他文件,如下所示: const { isAuthenticated, loginWithRedirect, logout } = useAuth0()

这就是发生错误的地方

所以问题是loginWithRedirect期待 1 个参数,但() => loginWithRedirect({})它是一个空对象。这个问题可以通过any在接口内部使用来解决,但是如果我想明确定义它应该放什么?

我试过loginWithRedirect: ({}) => void但现在loginWithRedirect: (...p: string[]) => auth0Client.loginWithRedirect(...p)给我这样的错误Type '{}' is not assignable to type 'string'.ts(2322)

没有打字稿的源代码是https://github.com/auth0-samples/auth0-react-samples/tree/master/01-Login/src

请帮忙。

0 投票
1 回答
745 浏览

reactjs - 使用上下文值作为初始状态值 - 反应钩子

我们可以使用上下文值在函数组件内启动状态变量吗?

在这里,我尝试使用上下文中的值启动组件状态。但是当上下文值改变时状态不会更新。

上面的代码可以在codesandbox中测试。

我可以直接使用上下文值,但我想在组件内部维护状态。如果我们不能使用上下文值启动状态值,如果我想从上下文中获取数据并且还想在内部维护状态,那么最好的方法是什么?

0 投票
1 回答
69 浏览

reactjs - 在 React 中调用 useContext 的位置是否重要?

例如,如果我有一个数组(示例有 4 个元素,真正的 50 个)

假设我得到了显示数据的组件:

接下来,我在父组件中重用该组件

这会导致组件被渲染乘以数组中的项目数量(因此也多次FooDisplay调用)。useContext那么,如果我有一个更大的数组和更多的项目,这会显着影响性能吗?或者我会更好地使用useContext包装器(父)组件中的 并传递首选项props吗?

实际上,组件嵌套了三次,这会导致道具传递混乱,所以这就是我使用上下文的原因,但是我可以想象如果它多次调用上下文会使应用程序变慢

0 投票
1 回答
328 浏览

reactjs - 如何将 Contentful api 数据与 React Context API(尤其是 useContext)一起使用?

我正在尝试使用我在称为内容的无头 cms 中设置的数据库。问题是,我看的所有教程都使用类组件来处理状态。我为 Context API 方法学习了 useContext,我发现它更吸引人,而且不那么令人头疼。我知道如何从conetextful 请求数据,但我不知道如何在使用Class 组件之外使用数据。我想我可以问的一个问题是,是否甚至可以将内容与对象或函数组件一起使用?

0 投票
2 回答
11331 浏览

reactjs - 如何在 Nextjs 布局中使用上下文挂钩

我正在用 NextJS 构建一个应用程序。我的应用程序显示一个帖子列表,用户可以从 AZ 或 ZA 对列表进行排序,并在每页显示特定数量的帖子(10、20 等)。当用户单击帖子以访问该特定帖子页面然后返回主列表时,排序和分页首选项被重置,我设法使用 cookie 保留保留的值,但我想useContext()改用。对于这个应用程序,我有一个Layout.js文件,并认为这将是插入我Provider这样的正确位置:

但是当我尝试从我的一个页面中获取价值时,我得到了TypeError: Cannot read property 'value' of null

useContext在我的应用程序的其他地方使用,所以我知道我可以让它工作。我只是不明白将它放在我的 NextJS 应用程序的哪个位置,因此即使我访问不同的页面,该值也会持续存在。

这是我试图打印值的 index.js:

还有我的 UseContext.js:

0 投票
1 回答
976 浏览

javascript - 如何在自己的文件中创建 React Context?

我正在学习 React 并使用上下文构建一个项目。最初我在 App.js 组件中构建上下文,但我想将其分离到自己的文件中以保持 App.js 更干净。但是,我无法弄清楚这是如何完成的,或者是否可能。我认为我坚持的部分是如何提供上下文。我在下面粘贴了我的新 Context 文件以及 App.js,其中原始 Context 结构被注释掉了。有谁知道我怎么能做到这一点?

0 投票
2 回答
364 浏览

reactjs - React Context 传递时间每秒发生无限循环

抱歉,我是 React 的新手,所以我遇到了一个问题,我的 Context 为其他组件提供了时间。当我仅将它与显示时钟的组件一起使用时,一切都很好。问题发生在另一个组件中,我想根据一天中的时间显示消息。太多的重新渲染。React 限制了渲染的数量以防止无限循环。

我的上下文组件

还有我的消息组件

谢谢

0 投票
1 回答
512 浏览

reactjs - 使用useContext(Reactjs)时如何停止重新渲染?

我有一个简单的反应应用程序,其中有一个FruitsList组件用于显示列表中的水果,一个FruitForm组件用于添加水果,两者都包含在Fruits组件中。我正在使用useContextuseReducer管理水果的状态。我已经为它创建了一个FruitContext。我想停止FruitForm的重新渲染,因为它只使用调度功能并且每次添加新水果时重新渲染它都是无用的。请建议任何解决方案。

表单组件

水果清单

水果

FruitContext

水果减速机

0 投票
1 回答
3958 浏览

reactjs - React useContext 重新渲染组件

我正在尝试在我的应用程序中使用 useContext 挂钩而不是 Redux。Header 组件和登录页面都使用相同的上下文。两者都是使用上下文提供者的路由组件的子组件。在注册表单中,我使用硬编码数据来检查功能。注册后标题不会重新呈现。

App.js(登录组件)

标头组件

和上下文

索引.js

路由模块