Tengo un componente modal que recibe un conjunto de datos de fuentes de imágenes y el índice inicial. Cada lado del modal tiene flechas de navegación que aumentan o disminuyen el índice actual. Esta es una versión simplificada del componente Modal:
function Modal({ index, data, onClose, show }) { const [currIndex, setCurrIndex] = useState(index); return ( <main className={show ? "Modal Open" : "Modal"}> <img src={data[currIndex].link} alt="ModalImage" /> <IconContext.Provider value={{ className: "Arrows" }} > {currIndex < data.length - 1 && (<AiOutlineRight className="ArrowNext" onClick={() => setCurrIndex(currIndex + 1)} />)} {currIndex > 0 && (<AiOutlineLeft className="ArrowLast" onClick={setCurrIndex(currIndex - 1)} />)} </IconContext.Provider> <div className="ModalBackground" onClick={onClose} /> </main> } export default Modal;Lo estoy usando así:
<Modal show={show} onClose={() => setShow(false)} data={filterData()} index={modalIndex} ></Modal>Esto debe ser una mala práctica porque no está funcionando. El estado inicialmente siempre es 0 y nunca se actualiza cuando lo incremento o lo disminuyo. Se restablece inmediatamente a 0. El estado está atascado en 0. El valor de los accesorios se pasa correctamente y todo lo demás simplemente no funcionará como el estado inicial. ¿Hay alguna otra forma en que pueda establecer el estado inicial en el Modal en función de la selección en otro componente?
Dentro de onClick para AiOutlineLeft y AiOutlineRight , en lugar de:
onClick={setCurrIndex(prevIndex => prevIndex + 1)} // -1 for the other onedebería ser:
onClick={() => setCurrIndex(prevIndex => prevIndex + 1)} // -1 for the other one En el primer caso, setCurrIndex se ejecutará inmediatamente cuando se monte el Componente, porque es una llamada de función: fn() .
En el segundo caso, la función de flecha se ejecutará solo al hacer clic, porque es una declaración de función: ()=> fn() , esperando ser ejecutada después de un evento de clic.
Una palabra de advertencia: tenga mucho cuidado al usar accesorios y el valor inicial del estado. Lea los siguientes recursos para conocer los casos en los que esto podría considerarse un antipatrón y debería evitarse: