问重呈现组件不会更新功能组件中的对象。

EN

  let currentIcon = () => icons[props.weatherStats.main.toLowerCase()]

 const icons = {
    thunderstorm: () => <i class="fas fa-bolt"></i>,
  };

"https://use.fontawesome.com/releases/v5.5.0/js/all.js"

"https://use.fontawesome.com/releases/v5.5.0/css/all.css"

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      unit: "",
      currentWeather: {
        main: "",
        desc: "",
        temp: ""
      }
    };

    this.getWeather = this.getWeather.bind(this);
    this.unitHandler = this.unitHandler.bind(this);
  }

  getWeather(e) {
    e.preventDefault();
    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;
    const appID = "bf6cdb2b4f3c1293c29610bd1d54512b";

    const currentWeatherURL = `https://api.openweathermap.org/data/2.5/weather?q=${city},${country}&units=imperial&APPID=${appID}`;
    const forecastURL = `https://api.openweathermap.org/data/2.5/forecast?q=${city},${country}&units=imperial&APPID=${appID}`;

    //fetch CURRENT weather data ONLY
    fetch(currentWeatherURL)
      .then(response => response.json())
      .then(data => {
        this.setState({
          unit: "°F",
          currentWeather: {
            main: data.weather[0].main,
            desc: data.weather[0].description,
            temp: data.main.temp
          }
        });
      })
      .catch(() => {
        console.log("something went wrong, but we caught the error");
      });
  }

  unitHandler(e) {
    function convertToCelsius(fahrenheit) {
      return ((fahrenheit - 32) * 5) / 9;
    }

    function convertToFahrenheit(celsius) {
      return (celsius * 9) / 5 + 32;
    }

    //if fahrenheit is checked
    if (e.target.value === "fahrenheit") {
      const fahrenheitTemp = convertToFahrenheit(
        this.state.currentWeather.temp
      );
      this.setState(prevState => ({
        unit: "°F",
        currentWeather: {
          ...prevState.currentWeather,
          temp: fahrenheitTemp
        }
      }));
    }
    //otherwise, celsius is checked
    else {
      const celsiusTemp = convertToCelsius(this.state.currentWeather.temp);
      this.setState(prevState => ({
        unit: "°C",
        currentWeather: {
          ...prevState.currentWeather,
          temp: celsiusTemp
        }
      }));
    }
  }

  render() {
    return (
      <div className="weather-app">
        <LocationInput
          getWeather={this.getWeather}
          unitHandler={this.unitHandler}
        />
        <CurrentWeather
          weatherStats={this.state.currentWeather}
          unit={this.state.unit}
        />
      </div>
    );
  }
}

// Component where you enter your City and State
function LocationInput(props) {
  return (
    <div className="location-container">
      <form className="location-form" onSubmit={props.getWeather}>
        <input type="text" name="city" placeholder="City" />
        <input type="text" name="country" placeholder="Country" />
        <button>Search</button>
        <UnitConverter unitHandler={props.unitHandler} />
      </form>
    </div>
  );
}

// Component to convert all units (fahrenheit <---> Celsius)
function UnitConverter(props) {
  return (
    <div className="unit-converter" onChange={props.unitHandler}>
      <label for="fahrenheit">
        <input type="radio" name="unit" value="fahrenheit" defaultChecked />
        Fahrenheit
      </label>
      <label for="celsius">
        <input type="radio" name="unit" value="celsius" />
        Celsius
      </label>
    </div>
  );
}

// Base weather component (intention of making specialized components for weekly forecast)
function Weather(props) {
  const icons = {
    thunderstorm: <i className="fas fa-bolt" />,
    drizzle: <i className="fas fa-cloud-rain" />,
    rain: <i className="fas fa-cloud-showers-heavy" />,
    snow: <i className="far fa-snowflake" />,
    clear: <i className="fas fa-sun" />,
    atmosphere: "No Icon Available",
    clouds: <i className="fas fa-cloud" />,
    mist: "No Icon Available"
  };

  const currentIcon = icons[props.weatherStats.main.toLowerCase()];

  return (
    <div className={"weather-common"}>
      <h1>{props.location}</h1>
      <h2>{props.day}</h2>
      <figure className="weather-icon">
        <div className="weather-icon">{currentIcon}</div>
        <figcaption>
          <h3 className="weather-main">{props.weatherStats.main}</h3>
          <div className="weather-desc">{props.weatherStats.desc}</div>
          {props.weatherStats.temp && (
            <div className="weather-temp">
              {Math.round(props.weatherStats.temp)}
              {props.unit}
            </div>
          )}
        </figcaption>
      </figure>
    </div>
  );
}

// Using the specialization concept of React to create a more specific Weather component from base
function CurrentWeather(props) {
  const dateObj = new Date();
  const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday"
  ];
  const currentDay = days[dateObj.getDay()];

  return (
    <Weather
      type={"current"}
      weatherStats={props.weatherStats}
      day={currentDay}
      unit={props.unit}
    />
  );
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

.App {
  font-family: sans-serif;
  text-align: center;
}

.weather-app {
  text-align: center;
}

.weather-current {
  display: inline-block;
}

.wf-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
      integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
      crossorigin="anonymous"
    />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>