javascript - 使用 onClick 从列表中删除单个项目

Question

我有以下带有多个对象数组的对象。我想知道如何使用 onClick 从列表中删除单个项目。

我知道我可以尝试使用拼接，但我不知道如何在这个对象形状内做到这一点

状态

const [filters, setFilters] = useState(initialData || [])

我尝试过这样

处理点击

const handleClick = () => {
    const newState = filters
    const index = newState[key].findIndex((a) => a.id === id)

    if (index === -1) return
    newState[key].splice(index, 1)

    setFilters(newState)
  }

数据对象

{
  "services": [
    {
      "id": "1b975589-7111-46a4-b433-d0e3c0d7c08c",
      "name": "Account"
    },
    {
      "id": "91d4637e-a17f-4b31-8675-c041fe06e2ad",
      "name": "Income"
    }
  ],
  "accountTypes": [
    {
      "id": "1f34205b-2e5a-430e-982c-5673cbdb3a68",
      "name": "Investment"
    }
  ],
  "channels": [
    {
      "id": "875f8350-073e-4a20-be20-38482a86892b",
      "name": "Chat"
    }
  ]
}

点击时渲染

<div onClick={handleClick}>
   <Icon fileName="smallClose" />
</div>

Answer 1

也许是因为您没有在任何地方声明“id”变量？如果它位于 map 循环中，您可以在 div 事件上发送元素 id。我认为这可以解决您的问题。

<div onClick={() => handleClick(id)}>

然后将其作为参数导入到您的函数中:

 const handleClick = (id) => {
    const newState = filters
    const index = newState[key].findIndex((a) => a.id === id)

    if (index === -1) return
    newState[key].splice(index, 1)

    setFilters(newState)
  }

此外，当您声明 newState 值时，请确保在声明中使用扩展运算符，在您当前的行为中，您正在改变您的状态，并且在 react 中不建议这样做:

const newState = [...filters];