Este es un componente funcional. Aquí estoy usando el gancho useEffect para presionar la API en la dependencia de la búsqueda. El lugar donde estoy haciendo console.log ( ${search} muestra la búsqueda actual en la consola. ¿Cómo puedo tomar las últimas cinco búsquedas en una matriz y luego mostrarlas?
const [city, setCity] = useState(null); const [search, setSearch] = useState("Dehradun"); useEffect ( () => { const fetchApi = async () => { const url = `https://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=7938d9005e68d8b258a109c716436c91` const response = await fetch(url); fetch("https://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=7938d9005e68d8b258a109c716436c91") .then(result => console.log(`${search}`, result)) const resJson = await response.json(); setCity(resJson.main); }; fetchApi(); },[search] )```El siguiente código puede realizar un seguimiento de las búsquedas anteriores como espera. Simplemente apila la respuesta anterior a una matriz junto con el resultado y excluye elementos del final cuando el tamaño supera más de 5.
function App() { const [search, setSearch] = React.useState("Dehradun"); const [searchHistory, setSearchHistory] = React.useState([]); const doSearch = () => { if (search.length > 0) { fetch( `https://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=7938d9005e68d8b258a109c716436c91` ) .then((res) => res.json()) .then((result) => { setSearchHistory((prevState) => [ [search, result], ...prevState.slice(0, 4) ]); setSearch(""); }); } }; return ( <div> <input onChange={(e) => setSearch(e.target.value)} value={search} /> <button onClick={doSearch}>search</button> {searchHistory.map(([search, result], index) => ( <div key={index}> <b>{search}</b> : {JSON.stringify(result)} </div> ))} </div> ); } ReactDOM.render(<App />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>