问题标签 [use-context]

I'm having issues with cloning arrays in my react application.

I import an array with data to my app called ApplicationsData. It's an array of objects.

App component has the following state:

I make a clone of the array with data using the "..." spread operator.

In my context I have a method - openApp - Which changes a property in an element in state.applications.

Whenever I get to the clone[appIndex].prop = value both state.applications and untouchedApplications gets overridden with that data, despite having used spread operators both in state and in openApp. The untouchedApplications array in state is not used anywhere in the app or the method but also gets updated. Also the newProp property being assigned to the cloned array is not present in the original array with data but does get applied to both arrays in the state after adding it to the cloned array.

I have also tried using Array.from and state.applications.slice() to create clones. I'm feeling a bit lost here, since I was sure this was the correct way of cloning arrays.

I'm sorry for messy code indentation. I have no clue how to make SO format it properly. Either first line is way before other lines or all lines start 8 tabs in. Any tips on that are appreciated as well.

我已经设置了一个 Provider 来为使用useContext. 因此，我试图利用本地存储为用户图像（头像等）保存一些状态

首先，我试图为用户保留头像，本质上是从 express 中保存他们的 ID，然后在我调用 Cloudinary（图像托管服务）时使用它。

我想我已经接近了（因为我获得了头像工作的默认图像占位符），但我无法设置本地存储。

提前谢谢您，父亲节快乐！

我正在使用 react 使用 contextHook 和 reducerHook 制作应用程序项目，但得到：

TypeError：无法读取未定义的属性“地图”

几天前同样的代码还在工作，但现在它给出了那个错误。我已经浪费了很多时间试图在互联网上寻找答案，但我无法获得任何帮助......以下是错误图片和我的代码：

Github repo 上的完整代码

错误图片 1

错误图片 2

错误图片 3

我有一个上下文：

我能够在数据服务中使用 set 函数，这可以正常工作。

当我尝试在其他地方使用它时，

tslinter 没问题，但在运行时，我得到了讨厌的 321 :-)

说实话，我在任何地方都没有提供者，因为我在 .ts 文件中使用它有什么帮助吗？谢谢大家

我有一个反应版本 16 应用程序。使用 React 的 Context、reducer 概念处理状态更改。

要更改状态并执行更改后的操作，可以按如下方式处理。例如 - 我在组件“联系人”中。在这里面，我在一个变量 age 上发送一个状态变化，它是一个如下给出的数字 -

并在减速器中捕获调度，如下所示

要在年龄发生变化后在 'Contact' 组件中执行某些操作，我们可以使用 'useEffect' 来观察 'age' 的变化

问题是——如果我们必须改变一个处于状态的对象，即我们必须改变下面给出的地址，而不是改变年龄，我们必须在地址改变后做一些事情。

我们如何观察地址的变化？

一种可能的解决方案 - 除了地址分派，我们还可以分派一个变量，我们可以根据它的变化做一些事情。但这不是一个完美的解决方案。

我知道这一点，但这不是我的情况。

例子：

所有这些提供程序实际上都是具有状态和效果的常规 React 组件，它们通过 GraphQL 获取一些数据并将这些数据作为“值”道具传递给 MyContext.Provider 在返回语句中。

这迫使我为所有这些提供程序中使用的模块创建大量模拟，只是为了在测试环境中呈现我自己的组件。

关于可以做些什么来避免创建这么多模拟的任何想法？

我为按钮切换创建了一个示例。

这是通过useContext（存储数据）和useReducer（处理数据）完成的。它工作正常。

这是CodeSandBox 链接到它是如何工作的。

version 1只是在单击按钮时调度。

然后我创建了一个version 2切换。基本上只是将调度放在自定义钩子中。但不知何故，它不起作用。

不知道那里发生了什么。但我认为派遣状态有问题。

（我试过如果有效载荷没有处理状态，比如一些硬代码的东西，它就可以工作，所以此时应该触发调度）

有人可以帮帮我吗？欣赏！！！

我遇到了一个问题，我需要更新我的 useContext 中的名称，然后立即对照我的代码的另一部分检查它。尽管当我对照另一部分检查它时，上下文中的名称值仍然为空。

所以这是我的上下文文件...

这就是我想要运行的...

我也尝试了 async 和 await 但这也没有用

我已经在我的代码框中重新生成了这个问题：https ://codesandbox.io/s/youthful-smoke-fgwlr?file=/src/userContext.js

我目前正在尝试弄清楚如何避免在将我的应用程序包装在上下文提供程序中（从 useReducer 获取值）然后使用 useEffect 挂钩通过子组件更新时创建无限循环。

CodeSandbox 上有一个问题示例。

显然不在这里重新发布所有代码很难谈论这个问题，但关键点：

根：

孩子：

我可能遗漏了一些明显的东西，但任何指针都可以帮助遇到同样问题的其他人。

CodeSandbox 上的完整示例。

我在使用 React 的 useContext 钩子时遇到了麻烦。我正在尝试更新从上下文中获得的状态，但我不知道如何。我设法更改了我想要的对象的属性值，但每次运行此函数时我最终都会添加另一个对象。这是我的一些代码：

我的“CartItem”组件中的一个方法。

呈现“CartItem”的“购物车组件”

那么如何从我的 cartValue 数组中保留以前的对象，并且仍然在这样的数组中修改一个对象内的单个属性值呢？

编辑：这是 ShoppingContext 组件！

edit2：感谢 Diesel 关于使用地图的建议，我想出了这段代码，它可以解决问题！