Tengo una lista de gráficos recibidos del estado redux. También he creado un enlace de estado cuyo valor predeterminado es el primer objeto de esta lista. ¿Por qué la variable currentFile no está definida? Busqué temas similares que me explicaran este problema, pero no encontré nada similar. Lo extraño es que cuando muestro el valor predeterminado en la consola, obtengo el resultado esperado. Cuando escribo un número en el índice de la lista de imágenes, por ejemplo, imágenes [0], también obtengo un valor indefinido.
Abajo pongo una foto del resultado de la consola.
Código:
function Images() { const [activeIdx, setActiveIdx] = useState(0) const dispatch = useDispatch() const imagesList = useSelector((state) => state.imagesList) const { loading, error, images } = imagesList const [currentFile, setCurrentFile] = useState(images[activeIdx]) console.log(images[activeIdx]) console.log(currentFile) useEffect(() => { dispatch(listImages()) }, [dispatch) return ( ... ) }useState(initialValue) solo usará initialValue en el primer renderizado y no cambia después de volver a renderizar. graphics[activeIdx] puede no estar definido, por lo que se registrará undefined como un valor de currentFile .
Debe escribir un oyente que guardará cada nuevo valor de graphics[activeIdx] en su estado:
useEffect(() => { setCurrentFile(images[activeIdx]) }, [images])