如何使用钩子在 React js 中同步两个计数器？答案

【问题标题】：How to sync two counters in React js using hooks?如何使用钩子在 React js 中同步两个计数器？
【发布时间】：2021-12-08 04:52:20
【问题描述】：

我是反应js的新手，我想在 React js 中连接两个计数器，好像一个计数器值增加一个，另一个计数器值应该减少一个，并且在按钮单击时，我需要添加一组新的计数器对。任何人都可以向我建议一个解决方案吗？谢谢。

【问题讨论】：

你有什么办法来解决这个问题？
我创建了两个组件作为 counter 1 和 counter2 并尝试使用循环连接它们，但我无法连接
你能建议任何例子吗？谢谢
请分享minimal, complete, and reproducible code example，了解您想要/尝试做的事情。如果它不起作用也没关系，我们可以使用它，但是我们不能或不做的是调试代码，我们看不到或为您编写它。 SO 不是代码编写服务。如果您需要提示，那么我可以建议Lifting State up 或使用React Context API 使用两个组件共享的“中心化状态”。
谢谢 Drew Rees，我将尝试您提出的概念并在我的代码中实现。如果我遇到任何问题，我会发布

【解决方案1】：

如果您想创建一个计数器对并且必须多次执行，我建议使用custom Hooks。

我为此目的创建了一个名为useCounter。

如果计数器的初始状态，您必须在这里传递array of length 2。并且钩子将返回[couters, updateCounter, err] 数组。

您可以参考此代码以获得洞察力。

注意：转到https://ikqdn.csb.app/pair in codesandbox browser

【讨论】：

嗨Himanshu Singh，我将“counter 1”和“counter 2”创建为单独的组件，您能否建议我一种使这些组件协同工作的方法，（我的意思是您的代码中的功能相同，但是如果两个计数器是单独的组件。）谢谢