即使在使用 state 時，React api 請求也會給我 undefined

Question

當我發出 api 請求並將其設置為 state 時，我現在正在制作一個帶有 react 和 react-router-dom 的天氣應用程序，然后我嘗試訪問該 ZA8CFDE6331BD59EB2666F898111CB4 的特定值我知道我寫的路徑是正確的，但我一直不確定這是我得到的錯誤：TypeError: Cannot read property 'IconPhrase' of undefined

這是代碼：

import "./App.css";
import React, { useState, useEffect } from "react";

const URL =
  "http://dataservice.accuweather.com/forecasts/v1/daily/5day/1761?apikey=tCl4ePcWJ4pcpzDCWO51JkxmOLgPjZOM&language=nl-NL&details=true&metric=true";

function Weather() {
  const [weather, setWeather] = useState([]);

  useEffect(() => {
    fetch(URL)
      .then((response) => response.json())
      .then((data) => data.DailyForecasts)
      .then((days) => setWeather(days[0]));
  }, []);

  console.log(weather);
  return (
    <div className="App">
      <header className="App-header">
        <div className="ImageDisplay">
          <div
            className="InnerDisplay"
            style={{ backgroundImage: `url("../src/heavyrain.svg")` }}
          >
            <span className="Degrees">{`${weather.Day.IconPhrase}`}</span>
          </div>
        </div>
      </header>
    </div>
  );
}

export default Weather;

Answer 1

因為您使用weather的初始值是[]並且第一次渲染時，天氣仍然是[] 。 它只是在 API 在useEffect中調用成功時更新您需要修復2個地方：

• [weather, setWeather] = useState({}); 它有助於您的代碼清潔。
• ${weather?.Day?.IconPhrase} 。 它有助於解決您的問題

Answer 2

發生這種情況是因為您在useEffect中提出了請求。 因此，組件在發出請求之前已經渲染一次，並且最初的天氣變量是一個空數組，因為const [weather, setWeather] = useState([]); 如果你在鏈之前檢查天氣，你會沒事的。

.... 
 <span className="Degrees">{`${weather ?weather.Day.IconPhrase:""}`}</span>

Answer 3

您需要做的是在渲染前檢查weather.Day 。天。 您可以為此使用條件渲染。

{weather.Day && <span className="Degrees">{`${weather.Day.IconPhrase}`}</span>} 

此外，我的演示需要https獲取 URL （以防萬一）

這是沙箱工作，檢查那里的控制台。

https://codesandbox.io/s/keen-wildflower-s2j4u?file=/src/App.js:769-848