Quiero que el estado de los data sea una matriz que sume los datos cuando los datos en la API cambien, de modo que almacene datos anteriores y nuevos para poder mapearlos y mostrarlos.
Aplicación.js
import React, { useEffect, useState } from "react"; const App = () => { const [data, setData] = useState([]); const [entireData, setEntireDate] = useState([]); let arr = []; const fetchAPI = async () => { const API = await fetch("https://randomuser.me/api"); const json = await API.json(); let results = json.results; setData(results); }; useEffect(() => { fetchAPI(); }, []); useEffect(() => {}, [data]); return ( <> <div className="container"> <p> {data.map((val, idx, arr) => { return val.login.username; })} </p> <img src={data.map((val, idx, arr) => { return val.picture.large; })} alt="getPicFromJson" /> </div> </> ); }; export default App;índice.js
import { StrictMode } from "react"; import ReactDOM from "react-dom"; import App from "./App"; const rootElement = document.getElementById("root"); ReactDOM.render( <StrictMode> <App /> </StrictMode>, rootElement );tal vez intente algo como esto
const fetchAPI = async () => { const API = await fetch("https://randomuser.me/api"); const json = await API.json(); let results = json.results; // here you get the old data and pushing the results into Data Data.push(results) // and setData to Data that has (Data + results) setData(Data); }; Además, si desea tener sus datos después de actualizar su navegador, es posible que deba almacenar los Data en el almacenamiento local y obtener los datos iniciales de eso.