问题标签 [react-context]

上下文 我创建了一个上下文并导出了生产者和消费者。我现在用 Producer 包装我的应用程序级示例。我希望能够在由不同包提供服务的模块中使用 ContextConsumer。

但是，当我尝试在此类模块中使用 ContextConsumer 时，它会抛出错误，cannot call function of undefined.

代码结构 下面是我的代码结构。

上下文-v1 包

上下文.js

index.js

Dropdown-v1 包 这个组件使用了另一个名为 Menu-v1 的组件，我试图在其中使用 Consumer 访问我从应用程序级别示例传递下来的增量函数。

应用程序示例 最后，我尝试在我的应用程序中使用这个 Dropdown 模块。这是我希望看到增量函数通过上下文传递的地方。

从'@ids/context-v1'导入{ IDSContextProvider }；从'@ids/dropdown'导入{下拉菜单项}；

我的示例中的模态组件

请求对此的热切帮助。我之前尝试过这个论坛的解决方案，但找不到任何方法让来自不同包的模块共享上下文。

假设我们设置了一个上下文提供程序，以及一些初始数据属性值。

在某个地方，假设消费者随后修改了这些属性。

在页面重新加载时，这些更改将丢失。持久化数据以便我们保留这些数据修改的最佳方法是什么？除了简单的本地存储之外的任何方法？

我正在尝试使用 Jest + Enzyme 测试一个组件，确保一个组件被呈现为我的消费者的孩子。当我这样做时，类似的测试有效：

像这样模拟上下文：

并像这样测试它：

但是当我像这样解构上下文道具时：

并以此进行测试：

我收到此错误：

我假设它与我如何模拟模块有关，但我不清楚如何使其适应这种情况。我该如何处理？

我正在使用反应上下文来管理某些元素的显示/隐藏，因为这些元素取决于多个服务器调用的返回数据。根据其他状态更改更新上下文状态的正确方法是什么？

这是我尝试过的，但它没有工作，因为它变成了一个无限循环。所有prevState项目都包含null或来自服务器的返回数据。

我有一个 React 组件，它是 Context Provider 的消费者。我将其用于国际化的翻译组件。我的消费者基本上是 React Context Consumer 元素的包装器，并调用底层的翻译函数。我的问题是，我只想从这个组件返回 STRING 值，但它实际上返回了一个破坏我的接口的 React 元素。是否可以“解开”这个并给我字符串？

提供者包装了我的整个 React 应用程序，如下所示：

我的目标是能够导入消费者并将其传递给一个字符串以进行如下翻译：

创建上下文

上下文控制器

应用程序.js

index.js

用户个人资料页面

登录后，我将被定向到具有正确上下文的用户页面。一旦我导航到另一个页面并尝试返回用户个人资料页面，上下文就会丢失。我必须重新登录？？

唯一使用上下文的两个组件是导航栏和用户配置文件页面。注意：我使用的是新的 16.6 上下文 API，即渲染中没有消费者标签。

我正在制作一个引导我的部分。本指南部分的作用 - 显示一系列流程。每个过程中有一系列步骤，每个步骤中有一系列选项。用户从其中一个步骤中选择一个选项，将它们带到下一个相关步骤。如果用户在第 2 步中选择选项，则可以将他们带到第 3 步或返回第 1 步。这取决于 id。

综上所述，我的流程发生了变异，我遇到了问题。我使用 React Context 作为全局状态。当用户选择一个选项时，我会获取该 ID，然后通过该 ID 过滤指定的对象。所以我应该只剩下那个特定步骤的过程。正在发生的事情是我最初的全局状态正在以某种方式发生变化。我在这里遗漏了一些东西，因为我是 React 的新手。

Ps - 我现在没有使用任何服务，所以我只是将一些 JSON 复制到我在 context.js 中的初始状态

上下文.js

Guides.js

Process.js

Guide-Steps.js

GuideSteps 中的更改是我正在执行过滤和设置新对象的逻辑的地方。

编辑

这解决了这个问题，但我认为它太贵了。我将如何解决这个问题而不必重新解析数组。

我正在使用 React 的新上下文 api (v16.x)。

我做了一个简单的测试应用程序以确保我理解它：

<Parent>即使使用和之间的中间组件，这也可以正常工作<Child>。

但是，下面的组件会产生以下错误：“元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义”（注意：我正在使用材料- ui库）

为什么会发生这种情况？

我有一个应用程序，它的状态包含用户是否登录的信息。此状态被传递给 Context Provider：

应用程序.native.js

在（几乎）应用程序的每个屏幕中，我想在标题中显示一个图标，例如：

SearchScreen.js

该图标应显示登录或注销图像，具体取决于应用程序的状态。我尝试通过使用上下文消费者来做到这一点：

登录图标.js

现在，当我登录时（通过此处未显示的 LoginScreen），状态按预期更改（isLoggedIn = true），并且 SearchScreen 的 Heder 中的图标显示正确的“注销”按钮。这太棒了！

但是当我单击此按钮时，出现两个错误：

1：警告：在现有状态转换期间无法更新（例如在“渲染”内）。渲染方法应该是 props 和 state 的纯函数。 这对我来说是个谜，我知道我这里有一个设计缺陷，但不知道如何解决它，因为......好吧，基本上所有事情都发生在渲染函数中？

2)道具类型失败：提供给“图标”的“布尔”类型的无效道具“onPress”，预期为“功能”。在 Icon (at withTheme.js:24) in Themed.Icon (at LoginIcon.js:22) in LoginIcon (at SearchScreen.js:12) 据我所知，将道具传递给函数组件是可能的，但是 this.props在组件内部调用 prop 时应省略。但这似乎不起作用。我怎样才能使它工作？

我想创建一个 react javascript 函数来在 HTML 端打印消息。把它想象成是console.log打印到页面上。我读过： context & redux 似乎有帮助，但想知道是否有更好更直接的方法来做到这一点。