Tengo la siguiente estructura ensamblada dentro de un estado (datos, 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" } }, ]Puse un 'onClick' en el botón pasando un 'ID' (por ejemplo: '23ea617b-210e-4329-9ab1-ecd2afa12e4d').
Pero no puedo eliminar la identificación relacionada. Intenté las siguientes formas, pero sin éxito:
const handleClick = (identifier: string) => { setData( data.filter((el: any) => { if (el[identifier] !== undefined) return el[identifier].product !== id; }), );además:
const handleClick = (identifier: string) => { delete data[identifier] );¿Alguien puede ayudarme con cómo puedo acceder a esta identificación?
Por favor, prueba este código, funciona para mí.
setData(data.filter(el => el[identifier] === undefined))Si d no es nulo y el identifier está presente en d , devuelva falso para filtrar el elemento:
const onRemove = identifier => setData(data.filter(d => !(d && d[identifier])))Ejecute la demostración a continuación y verifique el resultado en su propio navegador:
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>hola, Nosredna, he seguido el enfoque que has usado y tengo algunos problemas lógicos
puedes intentarlo así
const handleClick = (identifier: string) => { const newArr=data.filter(el=>!el[identifier]) setData(newArr); };