Estoy obteniendo datos a través de axios y almacenándolos en un estado
useEffect(() => { getCartItems(); }, []); const [abc, setAbc] = useState([]); const getCartItems = async () => { let data = await CartApi.get(`/${store.getState().auth.user.id}/`) .then(({ data }) => data); console.log('data =>', data) data.map(a => setAbc([...abc, a.item])) }Imprimo la variable de datos en la consola y da el siguiente resultado
Pero después de eso data.item en otro estado, pero no está almacenando el primero. Si ejecuto console.log(abc) , muestra solo 24
Por qué no estoy recibiendo [32,24]
Debido a que está reutilizando el mismo abc en cada una de esas llamadas a setAbc , por lo que solo se agrega el último de los elementos. Recuerda que el setter de estado no cambia la constante abc que estás usando, sino que programa una nueva llamada a la función de tu componente que obtendrá el nuevo valor para abc de useState .
Al actualizar datos basados en datos existentes, debe usar el formulario de devolución de llamada. Además, no hay razón para hacer llamadas setAbc repetidas, solo haga una con todos los datos nuevos, vea los comentarios *** :
useEffect(() => { getCartItems(); },[]); const[abc,setAbc]=useState([]); const getCartItems = async () => { let data = await CartApi.get(`/${store.getState().auth.user.id}/`).then(({data})=>data); const items = data.map(({item}) => item); // *** Get the items setAbc(abc => [...abc, ...items]); // *** Save them // ^^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− *** Use the callback form } (La solución principal es hacer [...abc, ...items] una vez . Aunque recomiendo usar la devolución de llamada, en muchos casos, simplemente setAbc([...abc, ...items]); también funciona siempre que no memorice getCartItems y esto solo se hace en el montaje o en respuesta a un clic del usuario o similar).