在小型天气应用程序中使用 axios.get () 而不是 fetch() 时，我遇到了状态从未更新且应用程序未重新呈现的问题

Question

I am Developping a small weather app using react as practice and i am aiming at getting better at using Axios for it is the desired HTTP client at the company where i am doing an internship but i am running with a problem. Let me show you:

import React, { useState } from "react";
import axios from "axios";

const Api = {
  apiKey: "",
  baseURL: "https://api.openweathermap.org/data/2.5/",
};

function App() {
  const [query, setQuery] = useState("");
  const [weather, setWeather] = useState({});

  function Search(e) {
    if (e.key === "Enter") {
      fetch(
        `${Api.baseURL}/weather?q=${query}&units=metric&appid=${Api.apiKey}`
      )
        .then((res) => res.json())
        .then((result) => {
          setWeather(result);
          setQuery("");
        });
    }
  }
  
  // function Search(e) {
  //   if (e.key === "Enter") {
  //     axios
  //       .get(
  //         `${Api.baseURL}/weather?q=${query}&units=metric&appid=${Api.apiKey}`
  //       )
  //       .then((result) => {
  //         setWeather(result);
  //         setQuery("");
  //       })
  //       .catch((error) => console.log(error));
  //   }
  // }


  function handleChange(e) {
    setQuery(e.target.value);
  }

  function dateBuilder(d) {
    let months = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ];
    let days = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
    ];
    let day = days[d.getDay()];
    let date = d.getDate();
    let month = months[d.getMonth()];
    let year = d.getFullYear();

    return `${day} ${date} ${month} ${year}`;
  }
  return (
    <div
      className={
        typeof weather.main != "undefined"
          ? weather.main.temp > 16
            ? "container warm"
            : "container"
          : "container"
      }
    >
      <div className="search-area">
        <input
          type="text"
          className="search-bar"
          placeholder="Search by city name (Ex: Paris)"
          onChange={handleChange}
          onKeyPress={Search}
          value={query}
        />
      </div>
      {typeof weather.main != "undefined" ? (
        <div>
          <div className="location-box">
            <div className="location">
              {weather.name},{weather.sys.country}
            </div>
            <div className="date"> {dateBuilder(new Date())}</div>
          </div>

          <div className="weather-box">
            <div className="temp">{Math.round(weather.main.temp)}°C</div>
            <div className="weather">{weather.weather[0].main}</div>
          </div>
        </div>
      ) : (
        ""
      )}
    </div>
  );
}

export default App;

As you can see i fixed the problem using fetch() (i checked online and someone did a similar app using fetch so i tried it and it worked i dont know why it really worked), and as you can see before i render a part of my app using the terniary operator i am checking if (weather.main != undefined) so i am make sure the api call returned and setWeather forced react to rerender adn update the state. But when using the commented Search function using axios.get the api call is succesfull i can see it in my console but the weather.main is always resolved to undefined and i feel like the app is not re-rendering, i checked online everyone says that the app is not updating the state and re-rendering but i did not know how to fix it. Any help would be much appreciated, Thank you, Peace.

Answer 1

axios wraps the result of the asynchronous call inside an object. You could get access to the result inside the data object.

axios.get(url)
   .then(res => res.data)

Answer 2

const getApiRes=asnyc(url)=> {
   try{
    const result=await axios.get(url)
    return result
    }
    catch(error){
    console.log(error)
    }
}
    
    function Search(e) {
        if (e.key === "Enter") {
         const result=getApiRes(url)
        }
      }