首次开发React天气应用遇PropTypes报错：props未定义求助

我首次使用React开发简易天气应用，以此学习组件间的交互逻辑。我有存储预报信息（温度、日期、湿度、风速、风向等）及位置数据的forecast.json文件。

我编写了ForecastDetails组件用于展示这些预报变量的值，并将其关联到主文件App.jsx。但每次构建该组件并在App.jsx中渲染时，都会出现PropTypes错误，提示传入ForecastDetails组件的props始终为undefined（我已通过引入PropTypes将这些props设为必填项）。

主文件App.jsx代码 #

import "../styles/App.css";
import React from "react";
import PropTypes from "prop-types";
import LocationDetails from "./locationDetails";
import ForecastSummaries from "./ForecastSummaries";
import ForecastDetails from "./ForecastDetails";

function App(props) {
  const { forecasts, location } = props;

  return (
    <div className="weather-app">
      <LocationDetails city={location.city} country={location.country} />
      <ForecastSummaries forecasts={forecasts} />
      <ForecastDetails forecasts={forecasts} />
    </div>
  );
}

App.propTypes = {
  // propType validation for forecasts data
  forecasts: PropTypes.arrayOf(
    PropTypes.shape({
      data: PropTypes.number,
      description: PropTypes.string,
      icon: PropTypes.string,
      temperature: PropTypes.shape({
        max: PropTypes.number,
        min: PropTypes.number,
      }),
    }),
  ).isRequired,

  location: PropTypes.shape({
    city: PropTypes.string,
    country: PropTypes.string,
  }).isRequired,
};

// In React, component names MUST START WITH CAPITAL LETTERS

export default App;

ForecastDetails组件代码 #

import PropTypes from "prop-types";
import React from "react";
import moment from "moment";

function ForecastDetails({ date, temperature, humidity, wind, description }) {
  return (
    <div className="forecast-details">
      <h1>Details</h1>
      <div className="forecast-details_date">
        {moment(date).format("ddd Do MMM")}
      </div>
      <div className="forecast-details_temperature">{temperature}&deg;C</div>
      <div className="forecast-details_humidity">{humidity}%</div>
      <div className="forecast-details_wind">{wind}mph</div>
      <div className="forecast-details_description">{description}</div>
    </div>
  );
}

ForecastDetails.propTypes = {
  date: PropTypes.number.isRequired,
  temperature: PropTypes.shape({
    min: PropTypes.number,
    max: PropTypes.number,
  }).isRequired,
  humidity: PropTypes.number.isRequired,
  wind: PropTypes.shape({
    speed: PropTypes.number,
    direction: PropTypes.string,
  }).isRequired,
  description: PropTypes.string.isRequired,
};

export default ForecastDetails;

主文件index.js代码 #

import React from "react";
import ReactDOM from "react-dom/client";
import "./styles/index.css";
import App from "./components/App";
import forecast from "./data/forecast.json";

const { location, forecasts } = forecast;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App forecasts={forecasts} location={location} />
  </React.StrictMode>,
);

预期效果 #

我知道问题出在组件间的props传递环节，但由于是首次接触React，无法准确定位错误，恳请各位提供帮助。

内容的提问来源于stack exchange，提问作者Erdem_Ayhan