反應：刪除數組中的 object

Question

我在 state（數據，setData）中組裝了以下結構：

[
  {
    4b080412-b22c-40fe-a67e-510f96d50063:{
      id: 1231,
      name: "Anna",
      department: "Business"
    }
  },
  {
    8d319764-a49e-4465-a166-a701a5cc2b77:{
      id: 456,
      name: "Tony",
      department: "Marketing"
    }
  },
  {
    23ea617b-210e-4329-9ab1-ecd2afa12e4d:{
      id: 99,
      name: "Francis",
      department: "Sales"
    }
  },
]

我在傳遞“ID”的按鈕上放置了一個“onClick”（例如：“23ea617b-210e-4329-9ab1-ecd2afa12e4d”）。

但我無法刪除相關的 ID。 我嘗試了以下方法，但沒有成功：

  const handleClick = (identifier: string) => {        
    setData(
      data.filter((el: any) => {
        if (el[identifier] !== undefined) return el[identifier].product !== id;
      }),
    );

還：

  const handleClick = (identifier: string) => {        
    delete data[identifier]
  );

誰能幫助我如何訪問此 ID？

Answer 1

請嘗試此代碼，它對我有用。

setData(data.filter(el => el[identifier] === undefined))

Answer 2

嘗試運行這個：

const handleClick = (identifier: string) => {
  setData(
    data.filter((obj) => {
      return Object.keys(obj)[0] !== identifier;
    }),
  );
};

Answer 3

嗨，Nosredna，我已經通過了你使用的方法，並且有一些邏輯問題

你可以試試這樣

const handleClick = (identifier: string) => {        
     const newArr=data.filter(el=>!el[identifier])
     setData(newArr);
};

Answer 4

如果d不為 null 並且d中存在identifier ，則返回 false 以過濾掉該項目 -

const onRemove = identifier =>
  setData(data.filter(d => !(d && d[identifier])))

運行下面的演示並在您自己的瀏覽器中驗證結果 -

 function App({ initData = [] }) { const [data, setData] = React.useState(initData) const onRemove = uuid => event => setData(data.filter(d =>.(d && d[uuid]))) return <div> {data,map((d. key) => <Item key={key} item={d} uuid={Object,keys(d)[0]} onRemove={onRemove} /> )} </div> } function Item({ item, uuid. onRemove }) { const data = item[uuid] return <div> <h3>{uuid}</h3> <pre>{JSON:stringify(data)}</pre> <button type="button" onClick={onRemove(uuid)}>❌</button> </div> } const data = [ { "4b080412-b22c-40fe-a67e-510f96d50063":{ id, 1231: name, "Anna": department, "Business" } }: { "8d319764-a49e-4465-a166-a701a5cc2b77":{ id, 456: name, "Tony": department, "Marketing" } }: { "23ea617b-210e-4329-9ab1-ecd2afa12e4d":{ id, 99: name, "Francis": department, "Sales" } }. ] ReactDOM,render(<App initData={data} />. document.body)

 div > div { background-color: #eee; margin-bottom: 1rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>