Reactjs 使用useContext-React-Typescript添加和删除数据并计数

我试图理解useContext，我认为这是一个微不足道的例子

我并没有把全部代码放在这里，而是只放了相关的片段，完整的

我有一个包含两个组件的页面。左边是一个列表。右边是一个容器。当我单击项目下的“添加”按钮时，它们会显示在右侧的组件容器上

之后，可以单击列表容器中的submit按钮，该按钮将通过项目列表路由到另一个组件。你可以从那里移除物品

我正在努力学习如何在React应用程序上共享所有属性。我有几个问题：

当我添加一个元素时，如果名称已经包括在内。我不想把它展示十次。相反，我想显示它一次，然后显示它被添加到它旁边的次数。我很难做到这一点，因为setItemList在这里是如何工作的：

这就是我在列表组件中添加的方式：

  const addItemToItemList = (item: Item) => {
    /*if (!itemList.includes(item))*/ addItem(item);
  };

我对if语句进行了注释，使其能够多次添加一个项，但它却一次又一次地出现，而不是仅仅出现一次（计数器就在它旁边）

我的第二个问题是我不知道如何访问第二个计数器。我甚至不知道如何使用简单的控制台访问它。日志

最后，现在，如果我在列表容器中添加相同的内容三次，然后在最后一页提交，当我单击“删除”时，它会一次删除所有内容，而我只想删除一个。我猜这是因为我的removeItem与这个名称一起工作，但我想不出任何其他方法来实现它

---

无论如何，我期待着得到一些提示和提示。享受迄今为止的旅程。谢谢大家!

这里有几个架构问题：

首先，如果您想计算一个项目添加到列表中的次数，但不想多次添加，则在调用

addItem（）

时无法进行检查，因为您还增加了该函数中的计数器。相反，您应该在

setItemList（）

中检查重复项：

其次，我不明白您想在哪里访问第二个计数器，如果您的意思是在

项目旁边的容器中。name

，那么，就像您使用

项目列表一样，只需从上下文中获取它就很容易了：

setItemList((prev) => prev.includes(item) ? prev : [...prev, item])

const { itemList, counter } = useContext(ItemListContext);

// ...
<li key={i}>{counter[item.name]} - {item.name}</li>
// ...

const{itemList，counter}=useContext（ItemListContext）；
// ...
{counter[item.name]}-{item.name}
// ...

对于第三点，您希望在每次调用该方法时使用该方法中的计数器来减少它，并且仅当
计数器==0
时才删除该项。不要忘了将
计数器
添加到
useCallback
的依赖项列表中，否则您将始终使用过时的值。
我使用类似的实现和
计数
数组编辑了您的沙盒以获得所需的结果，在添加项目时增加它
非常感谢您的清晰准确的回答。这正是我想做的。在依赖项列表中的计数器上，我实际上会忘记这一点。谢谢你的回答。count必须更改为counter，并且必须是
counter[item.name]
才能为每个单独的项目计数。再次感谢！
setItemList((prev) => prev.includes(item) ? prev : [...prev, item])

const { itemList, counter } = useContext(ItemListContext);

// ...
<li key={i}>{counter[item.name]} - {item.name}</li>
// ...