0
126
VistasNo se vuelve a renderizar el componente en el cambio de estado
Tengo una aplicación de reacción similar a la que se muestra en este enlace de codesandbox https://codesandbox.io/s/eatery-v1691
Al hacer clic en el Menu en la parte inferior central de la página, se representa el componente MenuFilter .
El componente MenuFilter , a su vez, usa un componente de checkbox de verificación para representar varias casillas de verificación y el estado marcado de estas casillas de verificación depende de la propiedad MenuFilter selectedMeals app.tsx .
Leí que cuando el estado se pasa como accesorio, la nueva representación ocurre tan pronto como cambia el estado, pero esto no está sucediendo.
El estado de comidas seleccionadas se inicializa con allItems y luego se administra de manera que cuando se hace clic en cualquier otro elemento, ese elemento se configura como allItems y estos elementos individuales pueden ser varios a la vez. ¡La administración del estado funciona bien, pero la casilla de verificación no se actualiza según el estado!
Sin embargo, si hace clic en cancel (el botón Aceptar aún no hace nada) y luego vuelve a hacer clic en el botón Menu , solo se representan los valores en el accesorio de Comidas seleccionadas.
Vea el video aquí ( https://youtu.be/Zmfc0MQGaIU esta es la aplicación completa, la aplicación codesandbox es una representación de esto pero no es lo mismo) donde funciona el cambio de estado (todos los elementos se eliminan y cuando se marcan todos los elementos, se eliminan otros elementos) funciona perfectamente, pero las casillas de verificación no se vuelven a representar correctamente
¿Qué estoy haciendo mal y, lo que es más importante, cómo obtengo el resultado que quiero?
Inicialmente, puse la pregunta aquí y la volví a renderizar tan pronto como se cambió el estado, pero no había una caja de arena para ella y, dado que la caja de arena es diferente de lo que puse en esa pregunta, creé una nueva pregunta. Gracias.
En este video https://youtu.be/2v3lOPaIPzU capturé el cambio en las selectedMeals en el registro de la consola y también muestro cómo las casillas de verificación no coinciden con las selectedMeals .
1 Respuestas
Responde la pregunta0
El problema está en el componente Checkbox .
const [checked, setChecked] = useState(isChecked); isChecked solo se usará como el valor inicial, no se actualizará cada vez isChecked checked . Puede actualizar manualmente un useEffect checked isChecked como una dependencia, pero no es necesario ya que el componente Checkbox se puede implementar sin ningún estado.
Sin embargo, si hace clic en cancelar (el botón Aceptar aún no hace nada) y luego vuelve a hacer clic en el botón Menú, solo se representan los valores en el accesorio de Comidas seleccionadas.
Esto se debe a que el modal se representa condicionalmente en función de menuModalIsShown y cuando este valor booleano se alterna, el componente se desmonta y se vuelve a montar, lo que hace que useState(isChecked) use el estado actualizado.
Checkbox actualizada:
export const CheckBox = ({ standAlone, text, onCheck, isChecked, value }: CheckBoxProps) => { return ( <div className={`${styles.checkbox} ${ standAlone ? "" : styles.notStandAlone } `} > <input type="checkbox" checked={isChecked} onChange={onCheck} value={value} /> <label htmlFor={styles.checkbox}>{text}</label> </div> ); }; 