如何在 ReactJS Hooks 中将数据添加到 object 的末尾

Question

我正在尝试设置一个多复选框页面，其中使用 ReactJS 挂钩通过来自不同类别的复选框过滤数据。

我正在添加 state，为此复选框被选为 object - 即

{
    color: 'orange',
    shape: 'square'
}

我的问题是，当我添加具有类似键的东西时，它会被复制，所以 state 和上面一样没问题，但如果我 select 滤色器为红色，则橙色滤镜被移除。

我的代码如下 -

setCheckboxes(checkboxes => ({
  ...checkboxes, [e.target.id]: e.target.dataset.item
})) 

我能做些什么来修改上面的代码，以便我可以有 2 个或更多具有相同键的过滤器，这将使我的数据看起来像这样 -

{
    color: 'orange',
    color: 'green',
    shape: 'square',
}

我不太熟悉 state 库，但愿意使用 React Context API。

Answer 1

当您将 object 传播到新的 object 中时，如果有任何匹配的密钥，声明的最后一个将是最终 object 中的那个。这是一个示例，以防我的措辞不太精确，在这个中我们首先传播 object用一个名为 color 的键，在传播操作后变成一个新的 object 和一个键：

 let baseObject = { color: "red" } let fromSpeadedObj = {...baseObject, color: "blue" } console.log(fromSpeadedObj)

下面是相同的示例，以显示输入的最后一个键|值是保留在最终 object 中的那个：

 let baseObject = { color: "red" } let fromSpeadedObj = { color: "blue", ...baseObject } console.log(fromSpeadedObj)

事实上，当你写一个带有重复键的文字时，重复的最后一个是存储的那个

 let obj1 = { name: "first", name: "second" } console.log(obj1)

Answer 2

您目前实施的工作。 添加过滤器颜色红色去除橙色的原因是因为在 object 中不能有两个相同的键

{
    color: 'orange',
    color: 'green',
    shape: 'square',
}

虽然，您可以重构 state 以接受 colors 和类似形状的数组

{
    color: ['orange', 'red'],
    shape: ['square', 'circle'],
}

一个完整的实现可以写成

const [filters, setFilters] = useState({ color: [], shape: [] })

const setCheckbox = (e) => {
   // filters[e.target.id] -> 'shape' | 'color'
   setFilters((filters) => {
      return {
         ...filters,
         [e.target.id]: [...filters[e.target.id], e.target.dataset.item]
      }
   })
}