我正在尝试将 api 中的数据作为我的反应组件中的道具传递，请任何人解释我能做些什么来解决这个问题？

Question

When the data is fetched from the API it returns an empty object. Here is the code below. It returns an empty object when I console.log then later brings back the object with data in it.

function App() {

  const [wdata, setWdata] = useState({})

  const API = "62f84860b69bddcd19d34120487d7375"


  useEffect(() => {
    fetch(`https://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=${API}`)
    .then(response => response.json())
    .then(resp => setWdata(resp))
    .catch(error => console.log(error))
  }, [Left])
  console.log(wdata)
 


  return (
    <div className="App">
      <Left className="left" name={wdata.sys.country} temp={wdata.main.temp} description={wdata.weather[0].description} />
      <Right className="right" />
    </div>
  );
}

Answer 1

You can display a loader at the time of fetching data from the Api.
Because data coming from the API needs some time.

Answer 2

Try

function App() {

  const [wdata, setWdata] = useState(null)

  const API = "62f84860b69bddcd19d34120487d7375"

  const fetchData = async() => {
      await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=${API}`)
.then(response => response.json())
.then(resp => setWdata(resp))
.catch(error => console.log(error))
 }

  useEffect(() => {
    fetchData()
  }, [Left])
  console.log(wdata)
 


  return (
    <div className="App">
{wdata ? <Left className="left" name={wdata.sys.country} temp={wdata.main.temp} description={wdata.weather[0].description} /> : <Left className="left" name={"loading..."} temp={"loading..."} description={"loading..."} /> }
      
      <Right className="right" />
    </div>
  );
}

Apparently using async, await waits for the API to return the response and stores in your state. Before the response is received, your data will be displaying loading...

Answer 3

As I said in my comment, the console.log() will always be executed before the .then() calls. This is how the JS event loop works. If you want to execute code after setWdata(resp) then simply put that code inside the .then() call.

useEffect(() => {
  fetch(`https://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=${API}`)
    .then(response => response.json())
    .then(resp => { 
      setWdata(resp);
      doStuffAfter(); // Executes after setWdata
    })
    .catch(error => console.log(error))
}, [Left]);

doStuffBefore(); // Executes before all then() calls

Answer 4

Can you please try this once?

function App() {

  const [wdata, setWdata] = useState({})
  const [isLoading, setIsLoading] = useState(false);

  const API = "62f84860b69bddcd19d34120487d7375"


  useEffect(() => {
    setIsLoading(true);
    fetch(`https://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=${API}`)
    .then(response => response.json())
    .then(resp => setWdata(resp))
    .catch(error => console.log(error))
     setIsLoading(false);
  }, [])
  console.log(wdata)
 
  if(isLoading){
     return <loader/>;
  }

  return (
    <div className="App">
      <Left className="left" name={wdata.sys.country} temp={wdata.main.temp} description={wdata.weather[0].description} />
      <Right className="right" />
    </div>
  );
}