este código sigue renderizando la página en cada cambio de estado y cuando agrego una imagen, sigue renderizándose infinitamente sin errores
const [adData, setAdData] = useState({ name: "", link: "", fromDate: {}, toDate: {}, fromTime: {}, toTime: {}, iconEn: null, allViews: 0, userViews: 0, }); const [iconEN, setIconEN] = useState(null); const [currentEnImg, setCurrentEnImg] = useState(null); const handleOnChange = (e) => { setAdData({ ...adData, [e.target.name]: e.target.value }); }; const handleOnCheck = (e) => { setAdData({ ...adData, [e.target.name]: e.target.checked}); }; if (iconEN) { const reader = new FileReader(); reader.onload = () => { setCurrentEnImg(reader.result); setAdData({ ...adData, iconEn: iconEN }); }; reader.readAsDataURL(iconEN); }qué estoy haciendo mal y cómo solucionarlo.
solo puede agregar el gancho useEffects cuando se carga la página
useEffect(()=>{ /* Query logic */ console.log('i fire once');},[]);en este enlace, llame a esa función que llama al ingresar a la página después del uso, este código no se procesa cada vez que cambia el estado, podría ayudar
El problema está aquí:
if (iconEN) { const reader = new FileReader(); reader.onload = () => { setCurrentEnImg(reader.result); setAdData({ ...adData, iconEn: iconEN }); }; reader.readAsDataURL(iconEN); }cada función de conjunto de estado vuelve a representar la aplicación y en cada nueva representación se llama a la misma función de conjunto de estado que hace que este proceso sea un bucle sin fin.
Solución: pruebe useEffect hook con una variable de dependency adecuada o [] y este problema se resolverá.
En su caso, coloque su inicio de sesión dentro de useEffect como:
useEffect(() => { if (iconEN) { const reader = new FileReader(); reader.onload = () => { setCurrentEnImg(reader.result); setAdData({ ...adData, iconEn: iconEN }); }; reader.readAsDataURL(iconEN); } }, []);