onClick React时删除项目对象倍数数组

Question

我有一个对象数组，里面有多个数组。我试图在单击按钮时删除该项目，但它返回未定义

数据Json

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

HandleDeleteItem

const handleDeleteFilter = (itemId: string) => {
    const items = filters.flatMap((param) => {
      Object.entries(param).flatMap(([key, arr]) =>
        arr.filter(({ id }) => id !== itemId)
      )
    })
    setFilters(items)
  }

功能按钮onClick

onClick={() => handleDeleteFilter(filter.id)}

Answer 1

您的第一个 flatMap 箭头函数使用方括号 (=> { ... }) 但没有 return 语句。试试这个：

const handleDeleteFilter = (itemId: string) => {
    const items = filters.flatMap((param) => {
        // Added a return here
        return Object.entries(param).flatMap(([key, arr]) =>
            arr.filter(({ id }) => id !== itemId)
        )
    })
    setFilters(items)
}

不太清楚filters是什么（我假设你显示的是JSON），所以我没有检查你的功能是否在逻辑上是正确的。

onClick React时删除项目对象倍数数组

Remove item object multiples arrays when onClick React

javascript

onclick

ecmascript-6

reactjs