使用不同的值更新状态不起作用答案

【问题标题】：Updating state with different values does not work使用不同的值更新状态不起作用
【发布时间】：2021-09-17 08:35:14
【问题描述】：

为了更容易理解我的问题，我创建了简单的沙盒：

问题描述：

我有 2 种产品，每种产品都有 2 种不同的颜色变体。该应用程序是非常简单的电子商务事物，因此在底部我有选择的颜色变体产品的摘要。

一切正常，但两种产品的颜色相同，我的预期行为是它们各自应该具有不同的颜色。

我认为问题在于产品共享一种状态，我不确定解决方案是什么，因为数据是动态的。

【问题讨论】：

当你有复杂的状态逻辑时，最好使用reducer。否则，管理状态可能会变得非常复杂。 redux.js.org/usage/structuring-reducers/basic-reducer-structure
感谢@JoelHager 的建议，我从未使用过redux，但我会尝试阅读它。
你不需要redux来实现一个简单的reducer。我没有redux，我使用reducer。我希望我可以在不发布“答案”本身的情况下显示代码，因为我认为它可以帮助您了解它们是如何形成的。
@JoelHager 谢谢你的解释。如果需要，您可以使用我的沙盒链接并在那里创建简单的示例。欣赏。

【解决方案1】：

正如您所提到的，问题在于您的组件共享由setSelectedData 和setSelectedColor 设置的state。

您需要使您的组件不要使用相同的state，或者以有意义的方式使用它，例如使用对象数组，其中每个项目代表不同的state 项目由您的组件表示。

这是一个使用部分数据的工作示例：https://codesandbox.io/s/n68iw

【讨论】：