Tengo un formulario de reacción que obtiene el estado de un elemento de casilla de verificación del almacenamiento local con useEffect .
const [checkbox, setCheckbox] = useState(false); useEffect(() => { setCheckbox(localStorage.getItem('Checkbox Value')) },[]);El JSX es
<div className="ui checkbox"> <input type="checkbox" onChange={handleCheckboxChange} checked={checkbox}</input> <label>I agree to the Terms and Conditions: {checkbox}</label> </div>Cuando el formulario muestra el valor correcto (verdadero, falso) se muestra en la etiqueta, pero la casilla de verificación se muestra marcada sin importar el valor. No estoy seguro de lo que me estoy perdiendo...
localStorage siempre devuelve cadenas, y dado que "falso" (cadena) es un valor verdadero, su casilla de verificación siempre estará marcada.
Cambia tu código para que sea:
useEffect(() => { setCheckbox(JSON.parse(localStorage.getItem('Checkbox Value') || 'false')) },[]);