我有一个我正在使用 3 的应用程序Context Provider。为了使应用程序正常工作，我必须将 <App/>所有这些providers. 随着我的应用程序的增长，我希望有更多的提供商来提供我必须连接的更多类型的数据。我已经开始觉得可能有更好的方法将提供程序传递到<App />.

我的App.js代码：

我的一些问题是：

1. 有没有更好的方法在 App.js 中使用多个上下文提供程序。
2. 这些提供者的嵌套顺序对 App 有影响吗？
3. 我们可以跳过添加提供程序<App/>，而是将它们导入任何需要它的屏幕并将该屏幕元素包装在其中吗？

这更像是一个通用的设计问题，而不是关于一段代码的特定问题。让我做一个大纲：

想象一个包含 3 个或更多点的折线的画布。这些点中的每一个都有一个圆形对象作为可拖动手柄。用户可以移动拖动手柄，该操作会更新仅包含这 3 个坐标的反应上下文。新的上下文会触发画布的重绘，使用新坐标更新折线和拖动手柄，同时在拖动发生时执行“对齐轴”和“对齐到最近的其他向量”检查。

我只使用功能组件（React.FC），并在需要的地方使用钩子共享状态。

我在拖动处理程序上使用 requestAnimationFrame() 来消除更新，使其尽可能接近客户端的最大刷新率。目标是保持在 60fps。

问题：

react-konva 中附加到舞台的组件的重新渲染是否总是会触发实际画布上所有内容的重绘，或者 react-konva 是否会跟踪？

在这种情况下是否建议使用 vanilla Konva 而不是 react-konva 抽象，以避免过度重绘，而仅在拖动操作结束后使用 react 上下文来保持状态？

有没有更有效的方法来处理我目前不知道的这个用例？

useState()当在我构建的上下文组件中使用 React Hook 实例化的有状态变量被更新（使用setState()方法）时，我使用该变量的功能组件之一不会更新。这个变量应该直接在功能组件中使用，还是作为来自父功能组件的道具传递？

预期行为

用户单击一个按钮，触发删除他们设置的通知之一。UI 然后从 UI 中显示的表行中删除该通知。当没有通知时，会向用户显示添加通知的选项。当用户随后添加通知时，它会在 UI 中显示为表格行。

观察到的行为

用户可以删除通知（这会立即反映在表格中），但是当所有通知都被删除并且用户尝试添加一个通知时，它会通过使用setState()上下文提供程序组件中的方法成功添加，但这并没有导致功能组件通过该useContext()方法使用此变量来更新 UI。

相关代码片段

上下文组件实例化alert变量并使用 Reducer 函数对其进行更新

UI 组件构建布局

子 UI 组件基于alert从上下文中消耗的变量创建表

问题

1. 为什么，当alerts在上下文组件中更新有状态变量时，UI——特别是AlertTable组件——不重新渲染？是否应该通过更改所消耗的变量来触发重新渲染useContext()？
2. 更好的做法是直接在 UI 组件中使用 Context 变量（例如AlertTable），还是在“组件树的更高位置”使用它（例如PersonalAlerts），然后将其作为道具传递给子组件？

在此先感谢您的帮助。

这是我的错误 TypeError: Cannot read property 'email' of null

这是我的提供者组件

这是我想要呈现我的财产电子邮件的组件

当我删除这部分

我在第一个渲染中看到工作正常并且 contextAuth.user.emai 为空，但在控制台中的第二个渲染中 contextAuth.user.emai 不为空。

这是我的存储库：https ://github.com/RotomFormProgramador/learnfirebase

我是如何解决这个问题的？

我正在尝试使用上下文 API 更新我的 react 本机应用程序的主题，但它抛出错误 setThemeMode is not a function。（在'setThemeMode（themeMode ==='light'？'dark'：'light'）'中，'setThemeMode'是“i”）

我参考了以下博客文章 https://www.smashingmagazine.com/2020/01/introduction-react-context-api/

主要错误图像

ThemeContext.js

应用程序.js

设置.js

导航.js

颜色.js

我想动态更新上下文。请原谅我这么愚蠢的错误，但我是新来的反应和 Js。我附上了问题图片。我认为我在useContext上做错了，因为当我尝试使用console.log(ThemeContext)时，它显示的是未定义而不是光。

我有一个包含一组复选框、单选按钮和一个按钮的表单。

每次我更新复选框或单选按钮的值时，它都会调度一个更新我的状态的事件。我可以通过单击我的按钮组件来查看此状态：<Button context={ExampleContext} />

但是，我似乎无法通过添加相同的代码片段在父容器中以相同的方式访问我的状态，因为它只是返回未定义，这与我在 Button 组件中的逻辑相同，所以我不确定为什么它不工作。

我显然做错了什么，但我不确定是什么。如何state从父容器中访问我的？

我在这里也有一个工作示例：https ://codesandbox.io/s/elegant-minsky-0i4yx

谢谢你的帮助！

每次我从以下代码行运行 yarn start 时，都会const context = useContext(GlobalContext);遇到“错误：无效的钩子调用。只能在函数组件的主体内部调用钩子”。我该如何解决这个问题，这让我很精神。这是显示错误、依赖项和我的代码的屏幕截图

这是我的 globalState 的代码，如果这是导致它的原因

因此，我对此进行了一些研究，显然我的 react 或 react-dom 可能不是最新的。Iv 尝试多次更新并运行 npm install。没有解决我的问题，我也几乎可以肯定我正确地调用了钩子。另一件事是我的全局状态设置正确，因为我可以在 react chrome 扩展中看到它。

我想用我通过useContext传入的className“editor”获取div的innerHTML。收到 innerHTML 后，我会将其附加到类名为“getcontent”的 div 中。目前，我的代码给了我一条错误消息“错误：目标容器不是 DOM 元素。” 我创建了一个Codesandbox。提前致谢！

我尝试导入聊天机器人上下文以访问当前正在编辑的聊天机器人，但出了点问题。你有什么想法可能是这里的问题吗？

太感谢了！

这是错误消息：

这是我的 chatstate.js 的摘录：

这是我的 ChatbotState.js 的摘录：

为什么我的应用无法从 useEffect 中的状态获取最新数据？

我有一个组件。使用useContext导入上下文的 Article.js。

代码沙盒

这是我在名为articleState.js的文件中的上下文

检查 chrome 开发者工具栏时，状态成功更新。我看到我从内容中提取的文章内容。它在我的状态。

我唯一的问题是当我尝试从未定义的文章中获取数据时。

这是我的减速器文章Reducer.js

感谢您阅读本文并提供任何帮助。