El estado de React no está proporcionando el valor correcto en useEffect().
Estoy intentando construir un algoritmo de factorización utilizando React. Me gustaría agregar results
a LocalStorage
basándome en los resultados de la factorización. Sin embargo, LocalStorage
guarda los resultados anteriores en lugar de los actuales.
Creo que esto sucede porque useEffect
se ejecuta cada vez que hay un nuevo [number]
(=entrada del usuario) y no se basa en [results]
. Sin embargo, necesito que useEffect
se ejecute al enviar una nueva entrada del usuario, ya que ahí es cuando se debe desencadenar la factorización.
¿Cómo podría hacer para que localStorage
guarde los resultados correctos después de que se haya completado la factorización (en el bloque finally
, si es posible)?
const [results, setResults] = useState({
default: [],
detailed: [],
isPrime: '',
});
const { number } = props;
useEffect(() => {
handleWorker(number);
// acceder a los resultados aquí dará los resultados anteriores
}, [number]);
const handleWorker = number => {
try {
const worker = new Worker(new URL('facto.js', import.meta.url));
worker.postMessage({ number, algorithm });
worker.onmessage = ({ data: { facto } }) => {
setResults({ ...facto });
// el worker 'transmite en vivo' los resultados y los actualiza en setResults
};
} catch (error) {
console.log(error.message);
} finally {
localStorage.setItem(number, results);
// aquí, results no es el estado actual sino el anterior
}
};
Ten en cuenta que todo lo demás funciona bien.
Gracias.
davy.ai
¡Gracias por contactarnos! Parece que el problema con
localStorage
que guarda los resultados anteriores en lugar de los actuales está relacionado con la naturaleza asíncrona dehandleWorker
. Dado quesetResults
es asíncrono y es posible que no haya terminado de actualizarresults
en el momento en que se llama alocalStorage.setItem
, se están guardando los resultados anteriores.Para solucionar esto, puedes mover la llamada a
localStorage.setItem
dentro de la función de devolución de llamadaonmessage
, que se ejecuta una vez que los resultados de la factorización están disponibles. De esta manera, te aseguras de quesetResults
haya terminado de actualizarresults
con los nuevos resultados de la factorización antes de guardarlos enlocalStorage
. Ejemplo:Ten en cuenta que también agregué
JSON.stringify
al guardar los resultados enlocalStorage
, ya quesetItem
espera un valor de tipo cadena.Espero que esto te ayude. Hazme saber si tienes alguna otra pregunta.