问题标签 [react-context]

我在上下文中有语言设置，如下所示

我的应用程序代码将如下所示

我的页面有一个组件来切换语言

LanguageSwitcher 在此MyPage需要更新上下文以将语言更改为“jp”，如下所示

如何从 LanguageSwitcher 组件内部更新上下文？

我正在尝试拥有 1 个可以执行操作的大型全局状态，但我不希望所有这些操作都存在于同一个文件中。

我想将操作分解为自己的文件并使用changeState函数（如减速器）进行抽象，但我不确定如何执行此操作。

我这里有一个例子。如果您单击该按钮，它将显示应用程序的进度：https ://codesandbox.io/s/r49qyymjzn

它似乎永远打不中{ctx => { console.log('...') }。

任何帮助将不胜感激，谢谢。

React 16.3.0 已发布，Context API 不再是实验性功能。Dan Abramov（Redux 的创建者）在这里写了一个很好的评论，但是 Context 仍然是一个实验性功能已经 2 年了。

我的问题是，根据您的意见/经验，我应该何时使用React Context而不是React Redux，反之亦然？

我正在尝试使用新的 React 上下文来保存有关登录用户的数据。

为此，我在一个名为LoggedUserContext.js:

果然，现在我可以使用消费者访问其他组件中的所述上下文，例如我在这里所做的：

但显然，要使这个系统有用，我需要在登录后修改我的上下文，以便它可以保存用户的数据。我正在使用 axios 调用 REST API，我需要将检索到的数据分配给我的上下文：

我在 React 的文档中看不到这样做的方法，但他们甚至提到保存登录用户的信息是他们考虑的上下文用例之一：

Context 旨在共享可被视为 React 组件树的“全局”数据，例如当前经过身份验证的用户、主题或首选语言。例如，在下面的代码中，我们手动通过一个“主题”道具来设置 Button 组件的样式：

那么我该怎么做呢？

编辑：下面回答

我已经在 youtube 上关注了这两个教程（目前没有太多），但它们都不适合我，它从 index.js 中的 Provider 向我发送了这个错误：

教程一：视频和代码

教程 2：视频和代码

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

我的代码 Context.js 文件：

index.js

我试过/检查了：

1. 仔细检查我安装了 16.3.1

2. 将上下文置于内部或外部<BrowserRouter>

3. 尝试过 {Context} 与 Context

4. 重新安装 NPM 包

5. 在 createContext() 中放入 { text: 'ok' }

6. 我尝试了“create-react-context”，但仍然出现同样的错误，也许这是一个线索？我不知道

7. 尝试了 react@16.3.0-alpha.0 ，它在教程中有效

8. 还有一些我没有忘记的东西。

编辑：下面回答

我正在使用新的 React Context API 而不是 Redux 开发一个新应用程序，之前，使用Redux，例如，当我需要获取用户列表时，我只需调用componentDidMount我的操作，但现在使用 React Context，我的操作就在里面我的消费者在我的渲染函数中，这意味着每次调用我的渲染函数时，它都会调用我的操作来获取我的用户列表，这不好，因为我会做很多不必要的请求。

那么，我如何才能只调用一次我的操作，比如 incomponentDidMount而不是调用 render？

举个例子，看看这段代码：

假设我将所有组件包装Providers在一个组件中，如下所示：

然后我把这个 Provider 组件包装了我的所有应用程序，如下所示：

现在，例如，在我的用户视图中，它将是这样的：

我想要的是这样的：

但是，上面的示例当然不起作用，因为getUsers它不在我的用户视图道具中。如果可能的话，正确的方法是什么？

我正在使用新的 React Context API，我需要从 Context.Consumer 变量中获取消费者数据，而不是在渲染方法中使用它。无论如何，我可以做到这一点吗？

例如，我想要什么：

到目前为止我测试的内容：上面的示例，测试了 Context.Consumer currentValue 和 Context Consumer 拥有的其他变量，尝试将 Context.Consumer() 作为函数执行，但没有一个起作用。

有任何想法吗？

我正在构建一个分成多个选项卡的表单。我正在使用 React Context API 来捕获表单输入的状态并在 Provider 中设置状态。这在表单输入位置的我的消费者中很好。但是，我在最后一个选项卡中的表单中也有一个视图，我可以在所有步骤中查看表单的输入。该位置的 Provider 仅显示 React Dev Tools 中的默认状态值，因此无法更新 Consumer。我不确定为什么 Provider 的第二个实例中的状态没有被更新以作为道具传递给审查部分。我createContext()已从提供程序导出并将其导入我的评论部分消费者和我的表单输入部分消费者。
继承人一些代码：

提供者：

表单输入消费者：

评论部分消费者

getContext只是我传递 ContextTypes 的一个简单的 HOC。 BasicInfoForm是表单的子组件，存在于表单内部的一个选项卡中，但提供者是直接去的，所以我认为选项卡是无关紧要的。

我的期望是BasicInfoProvider当BasicInfoForm调用传入的函数时将更新，并且更新将反映在使用的任何地方BasicInfoProvider，但是当它用于FinalReview组件时不会发生这种情况

我试图找出是否有可能从方法中获取 React 组件级别之外的上下文。作为下面的示例，我有一个模式，在激活模式和停用时，我想将提供者状态更改为某个值。

我真的不需要从渲染方法中访问该状态，而是我想通过传入上下文来从两个方法中更改上下文。有没有办法用上下文 api 处理这个问题？我可以从那里触发提供者操作，而不必将我的模态组件包装在 AppContext 中吗？

我正在尝试将 React Router V4 与新的 React 上下文 API 一起使用。这是我的代码：

router包含一个路由器功能，它将根据导航路径加载我的屏幕。
module是模块名称。
sideMenuConfig是我的侧边菜单的 json 配置。

尝试运行时，我从反应路由器收到以下错误：

我希望在仪表板中接收所有传递的道具以及匹配属性来运行路由器。