En mi aplicación React Native, estoy cambiando datos en el botón anterior y siguiente. Ahora tengo una función llamada getImageChunked donde configuro los datos en el estado. Pero al presionar el botón anterior y el botón siguiente, los datos no cambian instantáneamente en esas funciones de presión de botón. En cambio, en las funciones de pulsación de botones, muestra los datos del estado anterior. Aquí está mi código actual:
const [imageSet, setImage] = useState([]); const [count, setCount] = useState(0); const [nextImage, setNextImage] = useState(false); const [prevImage, setPrevImage] = useState(false); useEffect(() => { getImageChunked(); },[]); nextButton = () =>{ setCount(count + 1); getImageChunked(count + 1); console.log('imageset',imageSet) // It shows previous state data if (props.imageset === []){ setNextImage(true); } } prevButton = () =>{ setCount(count - 1); getImageChunked(count - 1); console.log('imageset',imageSet) // It shows previous state data if (props.imageset === []){ setPrevImage(true); } } getImageChunked = (n) =>{ var perChunk = 4 var result = 'API Data' var merged = [].concat.apply([], result[n === undefined ? 0 : n]); console.log('merged',merged); // Here the data changes properly setImage(merged); }¿Cómo puedo obtener datos de estado modificados instantáneamente en las funciones de presión prevButton y nextButton?
Por lo que entiendo, React pondrá en cola las acciones y luego las ejecutará en lotes en un momento posterior, lo que puede causar este tipo de problemas de estado retrasado.
Una forma de lidiar con esto es observar su estado con useEffect.
useEffect(() => { getImageChunked() }, [count]) De esta manera, getImageChunked() solo se llamará después de que se haya actualizado el estado de su count
Sugeriría lo siguiente:
const [imageSet, setImage] = useState([]); const [count, setCount] = useState(0); const [nextImage, setNextImage] = useState(false); const [prevImage, setPrevImage] = useState(false); useEffect(() => { getImageChunked(); },[count]); // Each time count is changing getImageChunked got called nextButton = () =>{ setCount(count + 1); if (Array.isArray(props.imageset)){ // AFAIK props.imageset === [] is always false setNextImage(true); } } prevButton = () =>{ setCount(count - 1); if (Array.isArray(props.imageset)){ setPrevImage(true); } } getImageChunked = () =>{ var perChunk = 4 var result = 'API Data' var merged = [].concat.apply([], result[count]); console.log('merged',merged); // Here the data changes properly setImage(merged); }