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

【问题标题】：Remove a single item from the list with onClick使用 onClick 从列表中删除单个项目
【发布时间】：2023-03-11 21:36:01
【问题描述】：

我有以下带有多个对象数组的对象。我想知道如何使用 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>

【问题讨论】：

我们不做作业，不要在没有给出你尝试过的例子的情况下说“我不知道”
@Ernesto，对不起。我更新我的答案！

标签： javascript json reactjs multidimensional-array onclick

【解决方案1】：

也许是因为您没有在任何地方声明“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 值时，请确保在声明中使用扩展运算符，在您当前的行为中，您正在改变您的状态，并且不建议在 react 中这样做：

const newState = [...filters];

【讨论】：

找不到名字'key'
是的，您也必须声明“key”变量。我猜它的值可能是“服务”、“帐户类型”或“频道”。您也可以将其作为参数添加到 id 中：const handleClick = (id, key) => { ... }。或者，如果您想使用其中一种特定类型，也可以直接声明它：例如 const key = "services"。

【解决方案2】：

当您打印组件时，请确保将它们添加到您的数组的 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);

}

【讨论】：

我得到 yourItems.filter 并用 filters.filter 替换，其中 filters 是我与对象数据的状态。但我收到消息 filters.filter is not a function