Tuve un problema: cuando devuelvo algunos datos de una API, los agrego a la matriz del estado, solo obtengo el último elemento de la lista, aunque se asigna a más de 1 elemento.
const [items, setItems] = useState([]); const fetchData = ()=> { DataService.getEnergyDataList() .then(response => { response.data.map(res=>{ setItems([...items, res.Voltage]) }); } ) .catch(e => { console.log(e); }); }El problema es que está llamando a setItems repetidamente (en la devolución de llamada del map ), reutilizando los elementos originales y luego proporcionando solo uno más. Eso configura un montón de actualizaciones de estado, de las cuales solo se conserva la última.
En su lugar, utilice la matriz que crea el map :¹
const fetchData = () => { DataService.getEnergyDataList() .then(response => { setItems([...items, ...response.data.map(res => res.Voltage)]); }) .catch(e => { console.log(e); }); }; ¹ Cada vez que te encuentras escribiendo un map sin usar la matriz que crea el map , es incorrecto. (Más en mi blog ). Averigüe si necesita esa matriz y modifique el código para usar los retornos del map de matriz, o cambie el map a algún otro mecanismo de bucle .
El problema es que está configurando un elemento para cada elemento en la devolución de llamada .map . Si desea agregar la nueva respuesta a los elementos, puede usar el enfoque de devolución de llamada de setState, algo como:
.then(response => setItems(currentItems => [...currentItems, ...response.data.map(res=> res.votage)) );