Estoy tratando de eliminar un objeto de una lista en reaccionar pero no tengo suerte. Estoy usando el gancho de reacción para mantener el estado:
const [temp, setTemp] = useState([]); useEffect(() => { call service().then(response => { let list = response.data.list // [{name:"test"}, {name:"xyz"}] setTemp(list); // empty handleRemove(name); console.log(temp) // empty }, []); function handleRemove(name) { const newList = temp.filter((item) => item.name !== name); console.log("remain lane--"+newList) setTemp(newList); }No sé qué está pasando, pero no está configurando la lista temporal. Probé varias formas de eliminar el elemento de la lista.
React useState es una operación asíncrona y no puede ver la actualización de inmediato.
En realidad, su código funciona bien, ¡pero no puede verlo! Para ver los cambios que se hicieron en el estado, cambié el código de la siguiente manera:
React.useEffect(() => { setTemp(list); }, []); React.useEffect(() => { console.log(temp); }, [temp]); function handleRemove(s_name) { const newList = temp.filter((item) => item.name !== s_name); //console.log("remain lane--"+newList); setTemp(newList); } return ( <div> <button onClick={() => { handleRemove("blue"); }} > Remove 'blue' </button> </div> ); Puse la función handleRemove en un evento de clic de botón para realizar esta acción en un momento diferente al hacer clic en él.
Consulte el código actualizado en CodeSandBox: Aquí está CodeSandbox: CodeSandbox
En handleRemove , debe usar temp.filter en lugar de list.filter
list no está en el alcance de useEffect, por lo que handleRemove no puede acceder a él, pero se puede acceder a temp ya que está en el alcance por encima de useEffect y handleRemove .
Entonces, una vez que haya obtenido los datos y los haya asignado a temp
list = temp
function handleRemove(name) { const newList = temp.filter((item) => item.name !== name); console.log("remain lane--"+newList) setTemp(newList); }