0
162
VistasEliminar una fila de destino en el componente de función Reaccionar
Quiero representar una lista de filas que se pueden agregar y eliminar dinámicamente. Tengo 2 componentes que manejan agregar y eliminar filas: ClassComponent y FunctionComponent . ClassComponent funciona según lo previsto, pero FunctionComponent solo elimina la primera fila. Las filas se almacenan como estado y se actualizan mediante setState(). ¿Cómo puedo hacer que FunctionComponent sea lógicamente equivalente a ClassComponent ?
Estoy usando la biblioteca uuid para crear claves únicas.
import React from "react"; import { useState } from "react"; import { v4 as uuidv4 } from "uuid"; export default function App() { return ( <div> <ClassComponent /> <FunctionComponent /> </div> ); } class ClassComponent extends React.Component { state = { list: [{ id: uuidv4() }, { id: uuidv4() }], }; handleDelete = (id) => { this.setState((prevState) => ({ list: prevState.list.filter((row) => row.id !== id), })); }; handleAdd = () => { this.setState((prevState) => ({ list: [...prevState.list, { id: uuidv4() }], })); }; render() { const { list } = this.state; return ( <> <ul> {list.map(({ id }) => ( <Row key={id} id={id} onClick={this.handleDelete}> {id} </Row> ))} </ul> <button onClick={this.handleAdd}>Add</button> </> ); } } const FunctionComponent = () => { const [list, setList] = useState([{ id: uuidv4() }, { id: uuidv4() }]); const handleDelete = (id) => { console.log(id); const copy = list.slice(); copy.splice(id, 1); setList(copy); }; const handleAdd = () => { setList([...list, { id: uuidv4() }]); }; return ( <> <ul> {list.map(({ id }) => ( <Row key={id} id={id} onClick={handleDelete}> {id} </Row> ))} </ul> <button onClick={handleAdd}>Add</button> </> ); }; const Row = ({ onClick, children, id }) => ( <li> {children} <button onClick={() => onClick(id)}>Delete</button> </li> );3 Respuestas
Responde la pregunta0
¿Hay alguna razón para no usar array.prototype.filter() tal como lo ha hecho en su componente de clase? Esto parece más legible y garantiza que evite mutar el estado directamente en menos pasos.
Así es como se vería en su función handleDelete en FunctionComponent :
const handleDelete = (id) => { setList(list.filter((row) => ( row.id !== id ))); };0
En su FunctionalComponent , debe proporcionar un índice de la entrada al método de splice . Prueba como a continuación.
const handleDelete = (id) => { const copy = list.slice(); // find the index const index = copy.findIndex(({ id: ID }) => id === ID); // do the deletiong using that index copy.splice(index, 1); setList(copy); }; 
0
Debe revisar su uso del prototipo de matriz de splice .
copy.splice(id, 1);El empalme debe pasarse como primer argumento un índice y en el segundo argumento un recuento de eliminación como tal:
splice(start, deleteCount)y le estás pasando una identificación. En realidad, en su caso, está pasando indefinido ya que está llamando a la función sin argumentos. Supongo que podría usar el índice de la función de mapa para que funcione:
{list.map(({ id }, index) => ( <Row key={id} id={id} onClick={() => handleDelete(index)}> {id} </Row> ))}En su caso, estaba pasando undefined como id y 1 como deleteCount, por lo que siempre estaba eliminando el primer elemento.