En esta implementación, el código se ejecuta y logra el propósito de lo que estoy tratando de hacer: usar axios para obtener la API ficticia en https://jsonplaceholder.typicode.com y luego mostrarla en la pantalla. Sin embargo, siento que mi código podría refactorizarse para ser más eficiente. Actualmente, tengo cuatro constantes useState (una para cada propiedad en el objeto), que se configuran/actualizan al obtenerlas. Traté de consolidar las constantes de CurrentFetch CurrentFetch2 CurrentFetch3 CurrentFetch4 en un solo useState({}) , pero React me estaba dando errores por usar objetos aquí. ¿Algunas ideas?

Aquí está mi código:

 import React, { useState } from "react"; import "./App.css"; import axios from "axios"; function App() { const [fetchCount, setFetchCount] = useState(1); const [currentFetch, setCurrentFetch] = useState([]); const [currentFetch2, setCurrentFetch2] = useState([]); const [currentFetch3, setCurrentFetch3] = useState([]); const [currentFetch4, setCurrentFetch4] = useState([]); const HandleFetchApi = async () => { axios .get(`https://jsonplaceholder.typicode.com/todos/${fetchCount}`) .then((response) => { let data = response.data; setCurrentFetch(data.userId); setCurrentFetch2(data.id); setCurrentFetch3(data.title); setCurrentFetch4(data.completed); setFetchCount(fetchCount + 1); }) .catch((error) => { console.log(error); }); }; return ( <div className="App"> <h1>Testing API Fetch from Dummy Api</h1> <button onClick={HandleFetchApi}> Click to fetch record #{fetchCount} </button> <h2>user id: {currentFetch}</h2> <h2>id: {currentFetch2}</h2> <h2>title: {currentFetch3}</h2> <h2>completed: {currentFetch4.toString()}</h2> <br /> <h5>from: https://jsonplaceholder.typicode.com/</h5> </div> ); } export default App;