问题标签 [react-context]

我创建了一个应用程序来学习 ReactJS。不幸的是，当我尝试使用上下文时，我在渲染时遇到了 1 个错误，但我的应用程序编译得很好。

这是我的代码：

这是错误： updateContextConsumer http://localhost:3000/static/js/bundle.js:20927:23

你能帮我解决这个问题吗？

我是 React Router 的新手，并尝试使用新的 Conext API 从提供程序内部进行重定向。基本上我的提供者看起来像这样。

我已经阅读了很多关于如何使用道具传递历史对象以及如何使用组件的信息，但我看不出这些方法在这里如何工作。我的上下文提供程序位于树的顶部，因此它不是路由器的子节点，因此我无法传递道具。它也不是标准组件，所以我不能只插入一个组件，除非我误解了某些东西（这很有可能）。

Edit: Looks like the way to go is withRouter, but how to export my AuthProvider in the code above so that history.push is available in my login function? As you can see I'm exporting multiple components wrapped in {} so can you wrap one of these in a HOC and do you have to explicitly pass history in or is it always available inside the component that's being wrapped?

我正在测试 React 的 Context API，并成功地将我的状态项和方法传递给 Consumer 组件。但是，当我向该方法添加一些条件逻辑时，我失去了对状态对象项的引用。我收到“无法读取未定义的属性‘颜色’”错误。如何在该状态对象中按颜色键引用，以便运行逻辑？我可以在 Provider 组件中执行此操作，还是只能在 Consumer 组件中执行此逻辑？

提供者容器文件 - ProviderComp.js

消费者组件 - ConsumerComp.js

基本上我们有一个模块，它读取服务器端渲染上的客户端数据，并应该将数据与它找到的数据一起提供给 renderToString （客户端使用 a 渲染window.__SOME_DATA__，但我不想在快速路由上使用全局)

这是我们的位置：

服务器服务如下所示：

最后但并非最不重要的是我的提供者：

问题是它似乎可以withProvider很好地设置函数中的数据，但是当我使用该ServerConsumer组件时，它似乎什么都不包含——但它应该包含传递给提供者的数据！

当我在客户端需要它时，上下文 api 工作得很好，但在服务器端对我来说似乎失败了。

这是用 react/react-dom16.4.1

评论后更新，这是我使用消费者的方式：

过去几天我一直在修改 React Context API，将它作为一个小型宠物项目制作了一个小型“CMS”。但是我遇到了一个有趣的问题，我一直在考虑它，但实际上我可能想多了，我很乐意收到任何指示，因为我在 Google 中没有找到类似的东西，只有基本的“开始”的文章。

所以让我们假设我们有以下数据模型：

• 文章
• 类别
• 图片

我为其中的每一个都制作了一个提供者-消费者对，例如：

当然，它们比这更加充实，但它们都具有相同的结构。现在我遇到的问题是，当您编辑文章时，您可以选择类别和图像。

为了解决这个问题，我制作了名为 ArticleForm 的组件。该表单是一个简单的组件，仅以 props 为参数。

我还有另一个名为 MediaGrid 的组件，用于在单独的页面上显示和上传图像。

因此，为了确保 ArticleForm 可以做我想做的所有事情，我制作了以下名为 ArticleFormContainer 的组件，我的想法是我可以重用 MediaGrid 组件：

然而，我无法摆脱这种非常忙碌的感觉，而且可能不是最好的方法。

任何想法如何改善这一点？如果这还不够信息，请询问，我会将其余代码发布在 Pastebin 或其他东西中。

谢谢

新手在这里做出反应并试图将我的头包裹在新的 Context API 上（我还没有研究过 Redux 等）。

似乎我可以做很多我需要做的事情，但我最终会得到很多很多的提供者，所有这些都需要一个标签来包装我的主应用程序。

我将有一个 Auth 提供者，一个用于主题，一个用于聊天消息（vis Pusher.com）等。另外使用 React Router 是另一个包装器元素。

我将不得不结束这个（以及更多）......

或者，还有更好的方法？

我正在练习我的 React Context。我创建了 Provider 并尝试从多层文件夹中使用 Consumer。但是我无法导入我的 CountContext。它一直给我这个错误信息

./src/Count/Test1Folder/Test2Folder/Test3Folder/Test4Folder/TestValue.js Module not found: Can't resolve './Count/CountContext' in '/Users/qiangbarejie/Documents/web_dev_training/react/mycontext/src/Count /Test1Folder/Test2Folder/Test3Folder/Test4Folder'"

这是我的代码，如果有人可以帮助我，我将不胜感激，谢谢！

我创建了一个名为 Count 的 React.createContex 单独文件夹和名为 CountContext.js 的文件，其目录路径为：src/Count/CountContext.js

我的 App.js 如下所示：

我在这个目录路径下创建了一个名为 TestValue.js 的文件

src/Count/Test1Folder/Test2Folder/Test3Folder/Test4Folder/TestValue.js

我正在尝试将子组件的状态传递给App.js文件。为此，我想使用新的上下文 API。

但是我读过这不起作用，因为如果值动态变化，提供者必须是消费者的父级。

就我而言，我不需要动态更改它，我只想将状态传递给消费者。子组件的状态不会改变，所以以后不改变也没问题。

这可以将状态从BlogPost.jsto传递App.js吗？如果有使用上下文 API 的替代方法，这也很好。

我的代码：

应用程序.js：

BlogPost.js： 应该传递这个组件的状态。如果我在其中定义上下文React.createContext('hello')就可以了。但我不能在那里定义状态。

我有一个使用 Redux 的应用程序。Is 存储全局状态，如下所示：

创建商店：

处理本地存储

Finaly 启动应用会话：

它完美地工作。所以我的问题是：有没有可能对新的 React Context API 做同样的事情？

使用新的上下文我很舒服，我只想了解商店、本地存储、订阅。因此，即使用户离开应用程序，状态也会保持不变。

我正在尝试使用新的 ReactJs Context 作为 Redux 的替代品，但是我遇到了一个错误。

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

https://reactjs.org/docs/context.html

这是我包装在 MyProvider 标记中的布局代码

这是我要导入的上下文代码

这里是提供者被消费的地方

任何帮助将不胜感激。