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

Question

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

我知道我可以尝试拼接，但我不知道如何在这个对象形状内进行拼接

州

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

我这样试过

HandleClick

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


<div id={idOfItem} onClick={handleClick}>
   <Icon fileName="smallClose" />
</div>
…….


function handleClick (e) {

e.preventDefault();
const {id} = e.target;

const list = yourItems.filter(item=> item.id!== id);

setItems(list);

}

Answer 2

可能是因为您没有在任何地方声明“id”变量？如果它在地图循环中，您可以在 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 值时，请确保在声明中使用扩展运算符，在您当前的行为中，您正在改变您的状态，并且在反应中不推荐这样做：

const newState = [...filters];

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

Remove a single item from the list with onClick

javascript

json

onclick

multidimensional-array

reactjs