0
114
ViewsLocalStorage no actualizado con el valor más reciente
Soy nuevo en reaccionar y estoy experimentando con incrementar un valor y almacenarlo en el almacenamiento local. Pude escribir el siguiente código a continuación, sin embargo, la última instancia del número incrementado no se actualiza el valor de almacenamiento local. Por ejemplo, si presiono "+1" dos veces y el número es 10, el dom se actualiza dos veces y muestra el número 12, pero el valor almacenado en el almacenamiento local es 11. ¿Por qué sucede esto?
import { useState } from 'react' function About () { const localStorageValue = parseInt(localStorage.getItem('value')) const [value, setValue] = useState(localStorageValue); function remove() { setValue((add) => add - 1) localStorage.setItem('value', parseInt(value)) } function add() { setValue((add) => add + 1) localStorage.setItem('value', parseInt(value)) } return ( <> <h1>About page</h1> <button onClick={remove}>-1</button> {value} <button onClick={add}>+1</button> </> ) } export default About;2 answers
Answer question0
Use el botón Actualizar y reflejará los cambios.
0
El problema aquí es el comportamiento asíncrono de setState , es decir, actualizará el valor del estado con un poco de retraso y sin detenerse para la ejecución completa de setState , pasará a la siguiente línea de código, es decir, localStorage.setItem() .
En su caso setState es setValue
Entonces, para superar esto, puede necesitar algún tipo de comportamiento de función de devolución de llamada para lograr esto con useState hook para que pueda usar useEffect para lo mismo de la siguiente manera:
import { useState, useEffect } from "react"; function About() { const localStorageValue = parseInt(localStorage.getItem("value")); const [value, setValue] = useState(localStorageValue); useEffect(() => { localStorage.setItem("value", parseInt(value)); }, [value]); // only rerun if value changes function remove() { setValue((add) => add - 1); } function add() { setValue((add) => add + 1); } return ( <> <h1>About page</h1> <button onClick={remove}>-1</button> {value} <button onClick={add}>+1</button> </> ); } export default About;Esto asegurará que se ejecutará cada vez que se realicen actualizaciones de estado sucesivas.
PD. No es necesario usar parseInt mientras se almacena, ya que se almacenará solo como cadena.