反应：删除数组中的 object

Question

I have the following structure assembled inside a state (data, 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"
    }
  },
]

I put an 'onClick' on the button passing an 'ID' (eg: '23ea617b-210e-4329-9ab1-ecd2afa12e4d').

But I am not able to delete the related ID. I tried the following ways, but without success:

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

also:

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

Can anyone help me with how can I access this ID?

Answer 1

Please try this code, it works for me.

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

Answer 2

Try running this one:

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

Answer 3

hi Nosredna I have gone through the approach u have used, and have some logical issues

you can try it like this

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

Answer 4

If d is non-null and identifier is present in d , then return false to filter the item out -

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

Run the demo below and verify the result in your own browser -

 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>