问题标签 [use-reducer]

• 对于 Js 和 React 的世界来说还是新手，我刚刚创建了一个可以运行的网站。但它让我感到困扰的是我让它工作的方式。我想深入了解如何以更好的方式做事。所以在这里我在沙盒上做了一个简单的项目来重现我所做的并问了几个问题。这是沙箱：https ://codesandbox.io/s/amazing-dream-oz8ec?file=/src/App.js

您将找到一个 console.log(tab) 来跟踪选项卡的演变。

• 所以这里是对这个项目的快速解释，我有两个组件（Mario 和 Luigi），我想与之交互并做出反应（没有双关语），并对彼此进行修改。为此，我制作了一个对象数组，并将所述组件的特征放入每个对象中。然后，我使用我在 reducer 中构建的案例对对象数组进行更改。从另一个角度来看，我有马里奥和路易吉，我希望能够单击其中一个以使它们能够跳跃（通过创建一个我希望在其中一个可见性方面独占的“跳跃”按钮） ，然后点击“跳转”按钮，让其中一个跳转（这使得一个跳转在网页上全屏显示，另一个暂时不可见）。我最不想“退出”

所以这就是我迷路的地方。

• 第一个问题：所以我有点理解改变现有状态（不重新渲染）和返回新状态（实际上是重新渲染）之间的区别。在我的第一种情况 'toggleCanJump' 中，突变 ( tab.map(hero => (hero.canJump = false));) 正在影响返回，因为它使我的选项卡的 canJump 值独占（一次只有一个可以为真），而在我的第二种情况下，'toggleJumped' 突变 ( tab.map(hero => (hero.canJump = false));) 不是影响数组，因此为什么在按钮的 className 中我有两个条件来建立类（className={hero.canJump && !hero.jumped ? "btn flex" : "btn"}）？

要验证是否在第一种情况下返回之前对突变进行评论'toogleCanJump'，您将看到它不再是排他性的，'canJump' 都可以具有值 true。即使有了突变，我也无法让“canJump”的价值对触发“跳跃”做出反应，即使突变如前所述。

• 第二个问题：第一个问题有点多余。由于我似乎无法完全控制我的对象数组，因此当一个组件全屏显示而另一个组件显示为无时（例如：当马里奥在跳跃时，路易吉消失了）。我需要一个“重置”按钮来实际切换一个案例，该案例返回（字面意思是复制和粘贴）我的对象数组的初始值。我觉得它很笨拙，但由于我没有完全掌握我的数组的操作（如问题一所述），我找到了这个解决方案来使它工作。那么我如何能够在数组中正确地切片和重新插入我的对象？

这个问题与第一个问题类似，但在不同的情况下。我觉得我得到了变异和返回我的状态（对象数组）之间的区别，但我似乎无法使其有效。'toggleCanJump' 上的突变似乎有效，但 'toggleJumped' 上的突变实际上不起作用，并且正在返回选项卡，因为我声明它确实是重置它的最佳方式（更优雅的方式）？

我想补充一点，可能是我的逻辑不好！也许它应该是一个数组的数组，我发现对象对网站的未来更新更加健谈。但我不反对用其他方式来做。

如果您想找到解决方案或另一种做事方式。您的时间将不胜感激。感谢您的阅读。

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

CodeSandbox 上有一个问题示例。

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

根：

孩子：

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

CodeSandbox 上的完整示例。

一个带有这种行为的视频，我在“A”中单击一次，在“D”中单击一次，或者就像有两种状态，真的很奇怪！ https://www.loom.com/share/ba7a97f008b14529b15dca5396174c8c

这是更新描述的操作！

这是所要求的大图，我试图简化为我在描述输入中测试的代码：

我尝试运行此代码，但它给了我一个运行时错误说

TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

这是代码。

错误指向这行代码const [{}, dispatch] = useContext(GlobalContext);

GlobalState 代码

我有一个表单，我想function usePostAddList()在AddList(). function onSubmit()基本上usePostAddList()就是提出POST请求。

这是代码AddList()：

添加列表.jsx

减速器/index.js

我已经阅读了许多解决方案，例如我必须为函数的名称写“use”，将函数大写AddList，但仍然出现此错误：

但是如果我在usePostAddList()下面以某种方式调用了类似的代码，它就起作用了：

添加列表.jsx

但这并没有解决我的问题

我们使用 Reacts 功能组件样式开发了一个可重用的类表组件。该表使用 React.useReducer 保存、管理和验证其状态。在每一行中都有几个输入字段、复选框和操作按钮来修改行/表状态。

现在在 GUI 的其他地方有一个保存按钮（不是表的子项）。如何从表中检索状态，以便可以将其（连同其他一些数据）发送到 REST-Endpoint 以保持持久性？

我们实际的解决方案是一个回调函数，它将被设置为桌子上的道具。每次渲染后从 table-component 内部调用此函数以发布当前状态的副本。现在，此回调函数的所有者获取并保存此数据，以便它在保存按钮的范围内可用。

这确实有效，但我们相信对于此类用例可能有更好的方法。我们不想将状态从表格提升到 ComponentWrapper，因为表格应该是可重用的，并且保存按钮可能位于 GUI 中完全不同的位置（例如，在工具栏或菜单中）。

对此有什么想法吗？提前致谢。

我正在玩一个简单的应用程序，它显示来自 firebase 的帖子集合并允许用户向其中添加文档。帖子通过包含 ADD 函数的 PostsContext 共享。useReducer 被调用两次，没有绕过它。问题是我正在从 ADD 内部写入 firebase，这会导致重复的行。

这个问题没有实际目的，只是尝试连接概念以让我了解从 Redux 切换到 usinguseReducer和 React 上下文 - 与 useReducer 一起使用时的 Context 基本上是一个仅可用于显式导入它的组件的 redux 存储？

我有一个名为 Counter 的类用于计数值，该类有两个方法，称为 inc 和 dec，用于计数。我想创建名为 CounterEdit 的输入组件并将 value 属性连接到 Counter 类实例。当计数器类的计数值发生变化时，我想要输入组件上的更新值。为此，我创建了名为 useCounter 的新钩子函数，该函数本身使用 useReducer 并将 useReducer 的调度函数传递给 Counter 类。Counter 类自己增加或减少值，并使用 dispatch 函数将计数值发送到 reducer。当 reducer 状态改变时，输入组件会更新。但如果我使用多个输入组件，则仅更新最后一个输入组件。其他方面没有变化。我正在等待您对我错在哪里的帮助。谢谢...

现在，我想用这个在类组件中使用reducer

在这里我的输入组件从减速器获得价值：

当我运行这个应用程序时，只更改第三个输入值。我想将计数器值反映到所有输入实例。

申请内容：

状态在页面上保存得很好，并且可以更改和交互，但是一旦我导航到另一个页面 - 状态就会重置

整个商店和 createContext 是

初始化状态

用于更改状态的按钮

为路由中呈现的元素提供上下文

在我从上下文访问状态的元素中

它总是 {isLoggedIn:false}