问题标签 [use-reducer]

我的减速机：

我的 App.js：

发生的情况是，在 App.js 中，在调用第二个 useEffect 之后，状态更新并且用户返回一个 Promise。承诺有多个属性，其中一个是它应该返回的正确状态。它不应该返回状态吗？难道我做错了什么？

简而言之：

1) 应用程序启动

2）useEffect第一次调用并具有正确的初始状态

3) 我调用 LOAD 动作来更新状态

4) useEffect 被第二次调用。这次它返回一个承诺，我猜它应该只返回商店的更新状态？

我在我的应用程序中显示 a 时遇到问题totalAmount。由于两次渲染，它显示错误的值。我尝试为此使用 useMemo 钩子。

这就是它的样子（不要打扰 css :D ）

所以它是这样计算的：

7.99 * 2 + 4.99 = 20.97

最后添加的项目 -44.99尚未计入totalAmount

2我猜它会因为渲染两次而将第一项乘以

这是我的代码沙箱：https ://codesandbox.io/s/objective-kare-805kc?file=/src/components/App.tsx

我不确定这是否是预期的行为，但是如果您在使用 useReducer 时退出调度（ https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-dispatch ）钩子，如果后面跟着渲染，动作会发生两次。让我解释：

当您单击按钮时，state.test 增加 2，而 totalClicks 增加 1。但是，如果我要更改减速器，使其不会像下面那样保释，它们都会增加 1。

为什么是这样？这是预期的行为还是错误？沙盒示例：https ://codesandbox.io/s/sad-robinson-dds63?file=/src/App.js

更新： 在做了一些调试之后，看起来这种行为只在用React.StrictMode包装时发生

有谁知道这是什么原因？？？

我开发了一个小应用程序，目的是研究反应钩子。该应用程序包括在一个部分中写入艺术家的姓名。在下一部分，一个类似的表格，用于填写每个艺术家的专辑。

我将所有组件以及上下文、状态和减速器都分开了。我对每个艺术家、专辑和歌曲都有单独的上下文。当我单击艺术家按钮时，我想过滤专辑以便只出现他们的专辑。但是使用减速器调度两次，在控制台日志中它告诉我两者都来自减速器文件。

有趣的是，第一次点击时，我只经过一次，但第二次我看到我选择了两次调度艺术家。

另一个有趣的事情是，当我更改选定的艺术家时，它会删除状态专辑，这是我拥有所有专辑的地方。它不会过滤它们，但会删除它们。

GitHub存储库

这是我单击以调用每个艺术家的 id 并将当前选择的艺术家发送到艺术家上下文和专辑上下文的表单

第二个是 ALBUMSTATE，我调用函数 getArtist 来调度并获取该选定艺术家的所有专辑

这是 ALBUMREDUCER

当应用程序初始化一系列 API 调用以填充状态时，我有一个名为 AppContext 的应用程序商店设置。

我遇到的问题是，当尝试执行 .findIndex、.IndexOf 或任何后续函数等数组函数时，系统总是以 a-1或undefined.

我 100% 确定并测试了此操作期间数据是否存在。

初始状态的状态如下所示：

状态如下所示：

API 返回的数据如下所示：

我正在使用useReducer以下代码填充状态：

这已加载到上下文存储中，如下所示：

并在异步数据库调用中使用如下：

状态的类型如下：

有效载荷的类型：

为什么 React 将数组存储为状态中的对象？其次，为什么我不能对应该存储为数组的项目执行数组函数？

这是来自的示例：https ://reactjs.org/docs/hooks-reference.html#usereducer

在此示例中，reducer函数的引用在各个渲染中保持不变。

我可以这样做以在每次渲染时重新创建 reducer 函数吗？

动机：

我正在研究货币转换器，我的减速器取决于THOUSAND_SEPARATORandDECIMAL_SEPARATOR是点.或逗号,，这可能会在渲染之间发生变化，所以我需要在每次渲染时重新创建它。

片段

它似乎有效，但它是一种反模式吗？

我的目标是使用useReducer钩子实现一个 React 控制的输入。

在减速器内部，我需要event.target.valueandevent.target.selectionStart来获取当前值和插入符号位置。所以我考虑过发送event作为动作payload的。ON_CHANGE

这就是我正在尝试的：

https://codesandbox.io/s/optimistic-edison-xypvn

它适用于输入的第一个字母，但它在第二个时中断。

这是错误：

警告：出于性能原因，此合成事件被重用。如果您看到这一点，则表示您正在访问已target发布/无效合成事件的属性。这设置为空。如果您必须保留原始合成事件，请使用 event.persist()。有关react-event-pooling更多信息，请参阅。

我应该怎么办？我需要在哪里打电话event.persist()。我应该reducer在处理程序中执行它还是需要在将其作为参数发送之前执行它onChange()。

还是只发送这些属性而不是发送完整event对象更好？

喜欢：

请参阅下面的片段。

通过做这个：

您避免在每次渲染时运行getInitialState2()used 。useState

但这似乎不起作用useReducer。

问题

有没有办法避免在每次渲染的钩子上运行initialState参数中使用的函数？useReducer

嗨，我的初始状态是空对象，

并在按钮单击中更新它 onSubmit。有没有办法在 useReducer 中实现这个场景，而且在这里我想创建一个新状态而不是改变它。非常感谢您的帮助或建议。

我正在使用 { useReducer } 来管理我的表单状态。但我有两个单独的处理程序

1. handleChange() = 用于输入更改（这个按预期工作）

2. UploadFile() = 用于上传图片（这个不更新图片/状态）

我无法使用 UploadFile() 更新图像的状态，不确定我做错了什么。下面是完整的完整代码。