问题标签 [use-reducer]

我有一个使用 useReducer 的自定义钩子，它控制在仪表板上呈现哪些组件。它在父组件中按预期工作，但是当我在子组件中使用它时，useReducer 运行，状态发生了变化，但它在父组件中没有改变，所以它没有通过适当的更改重新渲染。我在减速器中使用扩展运算符返回一个新对象。我已经在钩子内尝试了一些带有额外 useStates 和 useEffects 的 hacky 东西，但它们都没有产生影响。我尝试了不同级别的解构，也没有效果。我可以看到状态正在更改，但在父对象中返回时似乎没有被识别为新对象。

自定义挂钩

父组件

子组件

我正在尝试从最初使用 useState 钩子在各处传递的大量凌乱的道具钻孔中重构。我正在使用 Next.js，我试图远离使用 Context API 或引入 Redux。我真的只需要在单个页面组件上保持状态，它实际上只是本地 UI 状态，因为我正在使用 apollo-hooks 处理大部分数据。

我正在练习 React 钩子，遇到了 useReducer 和 dispatch 函数的问题。当我在第二次点击任一按钮时，我创建的 reducer 函数被调用了两次。我的控制台日志输出在第一次单击任一按钮时打印一次，然后在每次按下按钮时打印两次。

这是我的文件：

实用程序.js

用户列表.js

文本显示.js

应用程序.js

有人可以帮忙吗？谢谢。

完整的测试项目可以在https://github.com/Saro-DA/my-app.git找到

我正在编写一个程序，以便企业可以显示他们的服务，并根据项目的大小为每个服务设置价格。在“选项”组件中，我使用了一个 useReducer（我想我必须在 useReducer 内部创建数百个“案例”，以每个服务命名）。在“服务”组件中，我使用 Formik 表单来保存传递给每个“服务”的值。

这是“选项”组件，使用 userReducer 设置价格。循环数百个服务列表以呈现数百个“服务”组件

“服务”组件。这些将有数百个，并且每个都需要单独设置价格（smallPrice，smallPrice2，smallPrice3 ...？）

我正在使用 React 钩子 useReducer 来处理复杂的多层表单数据。

我遵循了本教程的指导：https ://levelup.gitconnected.com/handling-complex-form-state-using-react-hooks-76ee7bc937 。

在本教程中，复选框状态设置在状态对象的顶层。但是，我的复选框位于顶层下方（确切地说是第 3 层）。问题是我的复选框组件将更改它的状态值，但会将自己置于顶层，而不是它应该位于第 3 级的位置。

Tutorial 的状态
isMember处于顶层

我的
启用状态低于顶层

下面是我对 updateForm 函数的实现：

我尝试了许多不同的方法来处理调度函数和减速器函数。我也尝试过理解 dispatch 和 reducer 函数之间的关系，但是我没有找到任何可以帮助我理解当 reducer 的 action 参数是函数类型时发生的事情的东西。

我真的可以使用您的帮助来理解教程中的复选框调度/减速器函数关系发生了什么。根据我的研究，这是唯一使用 reducer 的 action 参数的构造函数类型来做出决策的实现（使用构造函数 === 函数和构造函数 === 对象）。据我了解，通常使用 switch() 语句代替，这就是我在网上能找到的全部内容。

我还可以使用您的帮助来了解如何让我的复选框正确更改其状态值。基本上，如何更改顶层以下组件的状态？

我正在创建一个 useReducer，例如，设置商品的价格。

我现在必须拥有多个这样的 SET_PRICE，因为我有数百种产品，所以我开始写

如果我写超过 10 个这样的代码，我可以看到有问题，更不用说 100 个了……有没有其他方法可以编写更少的代码？

安装组件后，我正在从公共 API 加载数据。加载数据时，我将其传递给减速器，但它总是触发两次。这就是我所拥有的：

如您所见，该组件等待数据填充减速器，该减速器何时INITIALIZE也被调用两次，但在需要调用之前我并不关心它ADD_NEW，因为在这种情况下，它会将两个空白对象添加到数组中只有一个。我没有进入有关副作用的文档，但我无法解决它。

处理这个问题的最佳方法是什么？

嗨，我仍然是新的反应，我有一个问题和错误：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

.

我创建了 auth 组件，错误提到“检查渲染方法AuthProvider”我怀疑错误来自 auth 组件中的“AuthProvider”函数，我不知道如何解决它。

屏幕截图： https ://imgur.com/CC7uO6A

auth.js

应用程序.js

我一直在尝试使用从返回数据的 API 获取的数据制作图表，如下所示：

当显示为图表时，日期字符串太长，所以我想通过删除年份部分来缩短它。

2020-03-06变成03/06

按照Robin Wieruch 的精彩教程，我现在有一个自定义 Hook 来获取数据：

连同我用 React Hooks 编写的图表组件：

以上工作。但我有一种感觉，这可能不是最佳实践，因为useEffect在渲染过程中会被调用两次。当我尝试useReducer在我的自定义 Hook 中采用时，代码不再起作用。

所以我想知道在这种情况下编辑数据的最佳方法是什么？

我是 React 的初学者++，我遇到了 Hook 的一些问题useReducer。

我正在使用 reducer ( dataFetchReducer) 从 API 中获取数据，情况如下 ( FETCH_INIT, FETCH_SUCCESS, FETCH_FAILURE, default)。

这个 reducer ( FETCH_SUCCESS) 返回状态：

另外，我初始化了它：

现在我想使用另一个减速器（我认为我应该通过动作拆分减速器？-因为我可以使用dataFetchReducer另一个组件）来操纵我的状态并避免做太多的任务。

准确地说，这是一个简单的 Todolist 示例。我取了我的待办事项，现在我想（reset, add, remove, markAsDone）等等，但使用另一个减速器。

我使用另一个 reducer ( todoReducer) 做得对吗 - 如果是这样，我应该使用哪个 const 自从已经声明const [data, dispatch]过 - 类似const [todos, dispatchTodos] 但我基本上在操作相同的数据？

希望我尽可能清楚。

提前致谢 ：）

我正在尝试显示时间列表（例如 07:00、07:30），但是当出现重复时间时，显示其旁边的重复次数（例如 07:30、08:00³）

当我遍历一个列表时，每个项目都需要自己的状态，以便可以在每个时间旁边设置和显示计数器

目前，我遇到了太多重新渲染的问题，但我也不确定我的减速器是否正确

没有任何注释的代码可以在这个 repo 中看到：https ://github.com/charles7771/decrease-number-wont-work/blob/master/index.js

我的上下文导入和 allBookedTimes

我有有用的功能来计算时间重复的次数

这就是我用来循环遍历 Time 列表并显示每个 Time 及其旁边的计数器的逻辑，以及尝试通过单击来减少计数器。