问题标签 [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 回答
135 浏览

javascript - 从孩子设置上下文会导致无限调用循环

我有一个使用react-router-dom.

PlayerPage 子组件将 SiteContext 设置为slugURL 中传递的参数的值。

问题是,当PlayerPage加载时,它会调用setValue设置上下文值的 reloading PlayerPage。这会导致无限循环并且我的代码崩溃。如何让 PlayerPage 只设置一次上下文的值?

0 投票
1 回答
82 浏览

javascript - 页面刷新时 ContextProvider 不挂载

请参阅代码沙箱上的完整代码

我的国家/地区 api 应用程序有两个Route组件-

DetailsRoute我点击一个国家/地区时,每个国家/地区的HomeRoute. 但是当直接发出http请求或DetailsRoute刷新时,我看到了这个错误-

/src/comps/Details/DetailsRoute.jsx

无法读取未定义的属性“边界”

它发生在线 -

country[0]从中提取countriesData似乎是undefined-

这不是问题BrowserRouter,因为DetailsRoute组件确实呈现但缺少信息。

我不知道当直接 url 请求被发送到组件时是什么逻辑错误导致它不起作用DetailsRoute?请让我知道修复!

0 投票
1 回答
48 浏览

javascript - 如何访问未知父级的上下文

假设我有两个独立的组件 X 和 Y,其中 X 是 Y 中的依赖项(不是项目中的直接子项)。是否可以在 X 中访问 Y 的上下文?

前任:

X是一个单独的项目,想访问Y的上下文,怎么办?我可以在 X 中导入 Y 的上下文并使用它吗?Y 完全是一个单独的(直到 X 被用作 Y 中的依赖项才知道)组件?

0 投票
1 回答
27 浏览

android - 反应本机应用程序的缓慢

我最近创建了一个带有 react native 的应用程序,在该应用程序中我使用 Axios 从数据库中请求图像的地址,出现的问题是在主屏幕上我提出了请求并通过地图,我渲染了一个图像列表,当移动到另一个屏幕 2 我发出另一个请求 Axios 以获取其他信息并呈现另一个图像列表 出现第二个屏幕变慢的问题,我看到如果我在一个屏幕上发出两个请求它会变慢太多,有一些方法可以改进,即使我在下面的屏幕中放置一个URI相同镜头的图像,这个问题也可以解决。

0 投票
1 回答
732 浏览

javascript - 在 NextJS 中使用 useState 对象时,上下文对象为空

我试图在 NextJS 中传递一个上下文对象,该对象使用来自 useState 挂钩的数据,但状态变量和 setState 函数在使用时未定义。这很奇怪,因为当我在其位置传递一个简单变量时,它工作正常,只有在使用 useState 时它是未定义的。所以我知道上下文对象正在工作,但 useState 挂钩却没有。

我的_app.js文件:

我的context.js文件:

我的nav.js文件:

这是返回错误TypeError: setActiveTab is not a function,因为它是未定义的。正如我之前所说,如果我通过上下文传递一个简单的变量,它工作正常,所以我知道它设置正确,但状态没有通过上下文对象。

我对国家做错了什么?

0 投票
1 回答
77 浏览

javascript - 如何使用反应钩子将对象数据从子组件发送到父组件并存储在父对象中?

这是我的父组件js文件...

这是我的子组件 js 文件...

我的问题:如何将包含对象数组的子组件“任务”变量数据发送到父组件并将它们存储到对象“menuItem”中,所以每当我点击保存按钮时,它应该在控制台上显示菜单?

0 投票
1 回答
732 浏览

javascript - 带有 useContext 的 HOC。无效的挂钩调用。Hooks 只能在函数组件的主体内部调用

我正在尝试使用 MaterialUI 的 Snackbar 编写一个 HOC,以便能够在任何网络故障中显示错误。出现以下错误,有人可以帮忙:

react-dom.development.js:14724 未捕获的错误:无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生:

  1. 你可能有不匹配的 React 版本和渲染器(例如 React DOM)
  2. 您可能违反了 Hooks 规则
  3. 你可能在同一个应用程序中拥有多个 React 副本
0 投票
0 回答
20 浏览

reactjs - 无法使用(获取的)上下文(提供者)中的值作为我的 useState 的输入

精简版:

我在 ContextProvider 中有一个 useEffect,我从服务器获取一些数据。在我的组件中,我使用这个 Context 并希望用“传入”数据初始化另一个 useState()-hook。[value, setValue] = useState(dataFromContext) 中的值未使用 dataFromContext 设置/初始化。为什么,哦,为什么?

很长的版本:

我试图遵循(并扩展)这个如何在反应中使用 context/useContext-hook 的例子

所以,我有一个 AppContext 和一个 ContextProvider,我用 index.js 包装了我的,例子中的一切都很好。

现在我想在我的 ContextProvider 中的 useEffect 中加载数据,所以我的上下文提供程序现在看起来像这样

现在,在我的组件中,我想显示这些数据。其中之一是用户选择的类别,一个 id 和 isSelected 的列表,它应该提供一个复选框列表。

所以我加载用户选择并将其转换为以“userCategories”结尾的字典。我使用那个“userCategories”来初始化checkedCategories。但是,从下面的console.logs,userCategories 设置正确,但checkedCategories 没有,它变成一个空对象!

所以我的问题是。我在这里想错了吗?(显然我是),我只想拥有一个外部状态。一切正常,但是当我使用它在我的组件中初始化 useState() 时,它没有被设置。我已经测试过在我的组件中有另一个 useEffect() ,但我只是觉得我在做一些更基本的错误。

谢谢你的帮助

0 投票
1 回答
213 浏览

reactjs - 上下文中的 useState 挂钩重置未聚焦的输入框

我的项目采用了一个显示名称,我希望将其保存在上下文中以供将来的组件使用以及发布到数据库时使用。所以,我有一个在上下文中设置名称的 onChange 函数,但是当它设置名称时,它会从输入框中消除焦点。这使得您一次只能输入一个字母的显示名称。状态正在更新,并且有一个 useEffect 将其添加到本地存储。我已经删除了该代码,它似乎不会影响这是否有效。

输入框不止一个,所以自动对焦属性不起作用。我曾尝试使用 .focus() 方法,但由于 useState 的 Set 部分不会立即发生,因此没有奏效。我尝试通过在 onChange 函数中设置值而不更改问题来使其成为受控输入。类似问题的其他答案在其代码中存在其他问题,导致其无法正常工作。

零件:

语境:

组件的父级:

这是我的第一篇文章,所以如果您需要有关该问题的其他信息,请告诉我。提前感谢您提供的任何帮助。

0 投票
1 回答
391 浏览

javascript - React Native:异步存储 setItem 导致应用程序崩溃

感谢您花时间阅读我的帖子!

我想做的事: 我想保存我的运动计数。知道如何使用异步设置/获取/删除另一个值也会很有趣。

发生了什么: 当我按下按钮保存它 (setItem)当我在 useEffect 中调用 save() 时,它会使我的应用程序崩溃,另一方面,getItem 和 removeItem 工作正常!

我所做的: 我确实尝试在保存函数中使用 JSON.stringify(exerciseCount) 并且它只工作了一次,而且如果我再次按下它,它会继续覆盖在“”中。

我注释掉的笔记只是我试图获得另一个价值,但我不确定它如何用于异步,所以如果有人也有一些提示,那就太好了!

我的代码:

如果您对我的锻炼上下文如下所示感到好奇:

再次感谢任何可以提供帮助的人!杰克。