TypeError：每當我搜索城市時，無法讀取未定義的屬性（讀取“國家”）

Question

我正在使用開放天氣 map 和 Reactjs。

問題出現在我的WeatherContainer組件中。

我希望我的搜索欄正常工作。 但是每當我搜索一個城市時，我都會收到此錯誤：

我嘗試更改 API 密鑰，但它什么也沒做。

代碼錯誤行指向：

我得到這樣的數據：

WeatherContainer.tsx：

const [weather, setWeather] = useState({
    city: "",
    country: "",
    temperature: 0,
    description: "",
    icon: "",
    humidity: "",
    feels: "",
    visibility: "",
    pressure: "",
    longitude: "",
    latitude: "",
    windSpeed: "",
  });

  useEffect(() => {
    if (fetchedData)
      setWeather({
        city: fetchedData.name,
        country: fetchedData.sys.country,
        temperature: Math.floor(fetchedData.main.temp - 273),
        description: fetchedData.weather[0].description,
        icon: `http://openweathermap.org/img/wn/${fetchedData.weather[0].icon}.png`,
        humidity: fetchedData.main.humidity + "%",
        feels: Math.floor(fetchedData.main.feels_like - 273) + "°C",
        visibility: fetchedData.visibility + "m",
        pressure: fetchedData.main.pressure + "hPa",
        longitude: fetchedData.coord.lon,
        latitude: fetchedData.coord.lat,
        windSpeed: fetchedData.wind.speed + "m/s",
      });
  }, [fetchedData]);

---

編輯：

This is how I defined fetchedData

export const WeatherContainer = ({
  fetchedData,
  error,
}: {
  fetchedData: any;
  error: string;
}) => {
  const [weather, setWeather] = useState({
    city: "",
    country: "",
    temperature: 0,
    description: "",
    icon: "",
    humidity: "",
    feels: "",
    visibility: "",
    pressure: "",
    longitude: "",
    latitude: "",
    windSpeed: "",
  });

  useEffect(() => {
    if (fetchedData)
      setWeather({
        city: fetchedData.name,
        country: fetchedData.sys.country,
        temperature: Math.floor(fetchedData.main.temp - 273),
        description: fetchedData.weather[0].description,
        icon: `http://openweathermap.org/img/wn/${fetchedData.weather[0].icon}.png`,
        humidity: fetchedData.main.humidity + "%",
        feels: Math.floor(fetchedData.main.feels_like - 273) + "°C",
        visibility: fetchedData.visibility + "m",
        pressure: fetchedData.main.pressure + "hPa",
        longitude: fetchedData.coord.lon,
        latitude: fetchedData.coord.lat,
        windSpeed: fetchedData.wind.speed + "m/s",
      });
  }, [fetchedData]);

我用這個 API https://openweathermap.org/current 。 我只是嘗試遵循此文檔，因此我將鏈接復制到了他們擁有的 API。

---

編輯#2

這是我建立連接的文件：

const API_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

export const getWeatherCoordinates = async (
  LAT: number,
  LON: number
): Promise<any> => {
  const API_URL = `https://api.openweathermap.org/data/2.5/weather?lat=${LAT}&lon=${LON}&appid=${API_KEY}`;

  const respCoordinates = await fetch(API_URL);
  const dataCoordinates = await respCoordinates.json();
  return dataCoordinates;
};
export const getWeatherSearch = async (CITY: string): Promise<any> => {
  const API_CITY = `https://api.openweathermap.org/data/2.5/weather?q=${CITY}&appid={API_KEY}`;
  const respCity = await fetch(API_CITY);
  const dataCity = await respCity.json();
  return dataCity;
};

API 響應為：

{"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."}

Answer 1

根據您發布的錯誤圖像和源代碼，似乎在getWeatherSearch中錯過了{API_KEY}前面的$符號：

export const getWeatherSearch = async (CITY: string): Promise<any> => {
  const API_CITY = `https://api.openweathermap.org/data/2.5/weather?q=${CITY}&appid=${API_KEY}`; // <- HERE 
  const respCity = await fetch(API_CITY);
  const dataCity = await respCity.json();
  return dataCity;
};