Reactjs 自定义颜色组件在更新颜色时中断

我试图实现一个自定义的颜色选择器使用反应颜色，我遇到了一个障碍

您可以在这里看到我的问题的简化示例：

初始状态正确通过，但一旦我尝试与组件交互，整个事情就会爆发。看起来我正在设置的新状态缺少一些原始属性，我不知道为什么

我是一个非常新的反应

[编辑]

---

用最终工作版本更新了主链接。特别感谢@ravibagul91帮助我解决了这个问题。

您应该将

key

发送到

onChange

处理程序，以更新状态中的相应密钥

<div style={{ position: "relative", zIndex: 0 }}>
    <div style={{
          height: "100px",
          width: "100px",
          position: "relative",
          float: "left",
          zIndex: 1000000
        }}>
        <Saturation hsl={swatch.hsl} hsv={swatch.hsv} onChange={(e)=> handleChange(e, 'hsv')} /> //Provide key to update
    </div>
    <div style={{
          marginLeft: "10px",
          height: "100px",
          width: "10px",
          position: "relative",
          float: "left",
          zIndex: 1000000
        }}>
        <Hue hsl={swatch.hsl} direction="vertical" onChange={(e)=> handleChange(e,'hsl')} /> //Provide key to update
    </div>
    <EditableInput value={swatch.hex} onChange={(e)=> handleChange(e, 'hex')} /> //Provide key to update
</div>

最后，你可以看到变化

useEffect (() => {
  console.log(swatch)
},[swatch])

---

您好，请检查我的解决方案，并让我知道这是否有帮助。根据您建议的更改生成了一个版本，但现在它正在正确更新所有必需的部分，而控制这些部分的

颜色属性没有更新。所以输入不会更新，我输入的任何十六进制值也不会更新其他值。猜猜这里还缺了一块？你能提供分叉版本吗？猜猜链接没有出现：我想你想要
hex
和
color
都应该在输入更改时更新？尝试此
{handleChange（e，'hex'）；handleChange（e，'color'）}}/>
更新颜色，但使用HSL对象时，不会更新其他对象。
useEffect (() => {
  console.log(swatch)
},[swatch])