我正在用 React 开发天气应用程序。这是学习项目。我遇到了错误。

我使用了 3 个组件。

App.js:

<WeatherApiAddressProvider>
  <WeatherCity />
</WeatherApiAddressProvider>

WeatherApiAddressProvider（Context API）：

const setApiAddress = (city) => {
  const address = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=7b7503a2aa9ca872738c7213619a72f5`;
  return address;
};

export const WeatherApiAddressProvider = ({ children }) => {
  return (
    <WeatherContext.Provider value={setApiAddress}>
      {children}
    </WeatherContext.Provider>
  );
};

WeatherCity.js ：

const setApiAddress = useContext(WeatherApiAddressContext);

const [city, setCity] = useState("");

const handleChange = (e) => {
  setCity(e.target.value);
};
return (
  <div>
    <div className="container">
      <div className="row">
        <div className="col">
          <select
            className="form-select mb-3"
            aria-label="Default select example"
            value={city}
            onChange={handleChange}
          >
            <option className="placeholder" value="">
              Please select a city
            </option>
            <option value="adana">Adana</option>
            ...
          </select>
        </div>

        <div className="col">
          <div className="p-5">
            <WeatherDetail setApiAddress={setApiAddress} city={city} />
          </div>
        </div>
      </div>
    </div>
  </div>
);

WeatherDetail.js ：

const [weatherInfo, setWeatherInfo] = useState({});

let imgCode = weatherInfo.weather[0].icon;

useEffect(() => {
  axios.get(city ? setApiAddress(city) : "").then((response) => {
    setWeatherInfo(response.data);
  });
}, [city, setApiAddress]);

return (
  <div>
    {city !== "" && (
      <div className="card">
        <img
          className="card-img-top"
          src={`https://openweathermap.org/img/wn/${imgCode}.png`}
        />
        <div className="card-body">
          <h5 className="card-title">{weatherInfo.name}</h5>
          <p className="card-text">
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </p>
        </div>
      </div>
    )}
    {}
  </div>
);

如您所知， WeatherApiAddressProvider 抛出 setApiAddres 函数， WeatherCity 抛出城市变量。 WeatherDetail 接收这些数据并使用 axios 从 weatherapi 获取数据。

我收到的错误：

TypeError: Cannot read property '0' of undefined(let imgCode = weatherInfo.weather[0].icon)

我尝试的解决方案：

• 我记录了收到的数据（ weatherInfo 或 response.data ），我发现这些数据是对象。然后我将 initialState(weatherInfo) 定义为对象，但问题并未解决。
• 我在 initialState 中创建了一个类似于收到的数据的对象。但问题并未解决。

我想在 WeatherDetail.js 中显示天气代表图像和天气详情。我该怎么做？