Soy nuevo en Next.js. Tengo un problema en el que no puedo cargar mi nuevo contenido en la página. Next.js sigue mostrando el contenido anterior que ya eliminé del código. ¿Por qué se muestra el contenido anterior?
Aquí está el último código que eliminé, pero aún se muestra en la pestaña fuente de Chrome.
export const UploadWrapper = () => { // const img__isClicked = ; const img__isClicked = useSelector(state => state); useEffect(() => { console.log('uploadWrapper', img__isClicked); }, [img__isClicked]) return ( <section> <UploadDropzone /> {(img__isClicked) ? console.log('hurray I got you') : null } </section> ) }Aquí está el código actualizado que no se muestra en la página:
export const UploadWrapper = () => { // const img__isClicked = ; const img__isClicked = useSelector(state => state.img__isClicked); useEffect(() => { console.log('uploadWrapper', img__isClicked); }, [img__isClicked]) return ( <> <section> <UploadDropzone /> </section> <aside> {(img__isClicked === true) ? <TagsWrapper /> : null } </aside> </> ) }Si deseo ver contenido nuevo, entonces tengo que reiniciar todo el servidor nuevamente.
evento que la consola me está mostrando
hurra te tengo
Es porque el nuevo renderizado no ocurre cuando no cambia el estado dentro del componente. Podría crear un estado imgClicked como este:
export const UploadWrapper = () => { const [imgClicked, setImageClicked] = useState(false); const img__isClicked = useSelector(state => state.img__isClicked); useEffect(() => { setImageClicked(img__isClicked); // <--- This state change will trigger re-render of the component. }, [img__isClicked]) return ( <> {imgClicked ? <TagsWrapper /> : null} </> ) }