0
166
Vistas¿Cómo eliminar un elemento de la lista y agregarlo a otra lista en Javascript?
Estoy tratando de eliminar un elemento de una lista y agregar el elemento exacto a otra variable de lista, pero aparentemente se sobrescribe.
Aquí está el código:
const [data, setData] = useState(["fridge", "milk", "dog", "cryptocurrency", "school", "blockchain", "developer", "engineer", "minecraft", "prison", "scofield", "twelve" ]) const [result, setResult] = useState([]) let temp_result = [] const handleWord = (w) => { for (var i=data.length-1; i>=0; i--) { if (data[i] === w) { let element = data.splice(i, 1) setData([...data]) temp_result.push(element[0]) break; } } console.log(temp_result) } Encuentre una imagen adjunta de la consola (temp_result): en temp_result está vacío, el primer clic en el botón eliminé el fridge de data y lo empujé a temp_result , el segundo clic en el botón eliminé la school de los data y lo empujé a temp_result , pero el elemento del fridge es desaparecido.
¿Cómo puedo evitar esto? Gracias por adelantado !
PD: cuando declaro temp_result fuera de mi función de exportación del componente, funciona bien, ¿es este un comportamiento normal en reaccionar nativo?
código completo:
import {useState} from 'react' let temp_result = [] export default function Passphrase({ navigation }) { const [data, setData] = useState(["fridge", "milk", "dog", "cryptocurrency", "school", "isychain", "developer","engineer", "minecraft", "prison", "scofield", "twelve" ]) const [result, setResult] = useState([]) const handleWord = (w) => { for (let i=data.length-1; i>=0; i--) { if (data[i] === w) { let element = data.splice(i, 1) setData([...data]) temp_result.push(element[0]) break; } } setResult(temp_result) } return (<View></View>)2 Respuestas
Responde la pregunta0
El problema es que no está utilizando el valor de 'datos' más nuevo cuando establece datos. [https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function][1]
Reemplace setData([...data]) con setData(currentData => [...currentData, ...thingsToAdd])
Esto puede ser más fácil de leer:
const [data, setData] = useState(["fridge", "milk", ...moreWords]) const handleWord = (wordToFind) => { const wordMatches = (word) => word === wordToFind; const indexOfWord = data.findIndex(wordMatches); if (indexOfWord) { setData(prev => { prev.filter(word => word === wordToFind); // remove the word return prev; } } }0
Al actualizar las propiedades de estado en React, debe usar el argumento de devolución de llamada en los setters, debido a la naturaleza asíncrona de las actualizaciones de estado.
https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
function handleWord(word) { setData((data)=> { return data.filter((w,i)=>{ return w != word; }); }) }o abreviado:
const handleWord = (word) => setData(data => data.filter((w, i) => w !== word));