javascript - 改变 JSON 对象的 React 状态 将数组存储为值

Question

如何从中推送或删除元素？

  const [addIconMenuList, setAddIconMenuList] = useState({
    "body": ["Logo", "Chest Pocket", "Tag"],
    "hood": ["Logo"],
    "sleeves": ["Cuffs"]
  })

    setAddIconMenuList((prevState) => {
      prevState[rightNavbarType].filter((item) => {
        return item !== type
      })
    })

我正在尝试这个不起作用

Answer 1

在 setAddIconMenuList 中，您不会从函数中返回任何内容。尝试添加这样的返回。

setAddIconMenuList((prevState) => {
  return prevState[rightNavbarType].filter((item) => {
    return item !== type
  })
})

编辑:或者您可以去掉函数体周围的括号。系统会自动返回这样的单个语句。

setAddIconMenuList((prevState) => 
  prevState[rightNavbarType].filter((item) => {
    return item !== type
  })
)

<小时/>

编辑:保留状态的其余部分

要保留先前状态的其余部分，而不仅仅是返回过滤列表，您可以尝试如下操作:

setAddIconMenuList((prevState) => {
  return {
    ...prevState,
    [rightNavbarType]: prevState[rightNavbarType].filter((item) => {
      return item !== type
    })
  }
})

...prevState 将前一个对象分成单独的部分，因此您将拥有之前状态中的所有内容，并在此对象中返回。

[rightNavbarType] 使用 ES6 计算属性语法，因此您可以访问所需的属性，例如“body”。然后将“body”设置为新的过滤数组。