根据React中WeatherAPI的数据显示不同的消息

Question

我一直在尝试在传入 OpenWeatherAPI（当前天气版本）的数据时显示不同的消息。我想要一条针对不同温度的消息，并针对同时显示的不同描述显示一条消息。问题是数据传递时消息没有更新。有没有办法来解决这个问题？我需要尽快获得帮助，因为我的截止日期是 1 月 16 日。

这是 Aside.js 文件的代码：

//Aside Component - used for suggesting things to wear based on the location

//DEPENCENCIES
import React, { useState } from 'react'


function Aside() {
    /* PSUEDOCODE:

    TRYING TO USE THE DATA BEING PULLED IN AND BASED ON THE DATA, THERE'S A DIFFERENT MESSAGE BASED ON THE WEATHER AND THE DESCRIPTION

        dependencies - import WeatherCard and WeatherApp so I can use the values in the WeatherCard & WeatherApp for my algorithm
    
        useState - to set the initial value of the aside. say something like, "type zipcode to get suggestions for attire"

        setMessage - to grab the information on what to say when the zip code is displayed

        ex) const setMessage = async () => {
            use if/else statements to choose which message to display. use emojis!
                an if/else statement for weather[0].description
                an if/else statement for main.temp
                an if/else statement for main.humidity
            nest all of the if/else statements in a trycatch, so if it doesn't work, it sends an error message


        useEffect - use useEffect to run the setMessage function
        ex)
        useEffect(() => {

        
        , []}) <--- This is where I put the zipcode to indicate that it wont run unless the zipcode has a value

        const display - to display the message

        return - returning the const display
    
    */


    let [message, setMessage] = useState("Type in ZipCode to get suggestions for attire!")

    /* COMMENTED OUT TO KEEP THE SITE FROM CRASHING. FINISH CODING THIS LATER
    const { zipCode } = useParams()*/

    setMessage = ({ WeatherData }) => {
        try {
            //MESSAGES FOR TEMPERATURE
            if (WeatherData.main.temp > 100) {
                message = "It's hot.... like really hot... leathers not recommended at all..."
            } else if(WeatherData.main.temp < 70) {
                message = "it's warm today! No need for bundling up"
            } else if(WeatherData.main.temp < 45) {
                message = "It's not that cold outside today, but a small sweater will do"
            } else if(WeatherData.main.temp < 20) {
                message = "Brrr, chilly! try putting on a Jacket!"
            } else {
                message = ""
            }

            //MESSAGES FOR DESCRIPTION - tell the users what to bring/buy
            if (WeatherData.weather[0].description == "clear sky") {
                message = "You might want to get some sunglasses"
            } else if (WeatherData.weather[0].description == "shower rain") {
                message = "Make sure you have an umbrella"
            } else if (WeatherData.weather[0].description == "rain" && WeatherData.weather[0].description == "thunderstorm") {
                message = "Grab an umbrella! It's pouring!"
            } else if (WeatherData.weather[0].description == "snow") {
                message = "get your snowboots 'cause its snowin outside."
            } else {
                message =""
            }

        } catch (error) {
            message = "No zipcode, no attire suggestions. sorry..."
        }
    }

    
    /* COMMENTED OUT TO KEEP THE SITE FROM CRASHING. FINISH CODING THIS LATER
    useEffect(() => {
        setMessage()
    }, [zipCode])*/

    return (
        <div className='asideContainer'>
            {message}
        </div>
    )
}




export default Aside

这是在 App.js 文件中导入它

      <Aside zipCode={zipCode} weatherData={weatherData} />

我在 useState 中收到了要拉出的初始消息，但我在尝试更新消息时陷入困境。我是 React 的初学者，所以我需要一些帮助

Answer 1

您可以使用另一种状态进行描述，并根据消息/描述设置状态，如下所示-

import React, { useState } from 'react'


function Aside() {
    let [message, setMessage] = useState("Type in ZipCode to get suggestions for attire!")
    let [description, setDescription] = useState("");

    const getWeaterDetails = ({ WeatherData }) => {
      let  weatherMessage = "";
      let weatherDescription = "";
      try {
            if (WeatherData.main.temp > 100) {
                weatherMessage = "It's hot.... like really hot... leathers not recommended at all..."
            } else if(WeatherData.main.temp < 70) {
                weatherMessage = "it's warm today! No need for bundling up"
            } else if(WeatherData.main.temp < 45) {
                weatherMessage = "It's not that cold outside today, but a small sweater will do"
            } else if(WeatherData.main.temp < 20) {
                weatherMessage = "Brrr, chilly! try putting on a Jacket!"
            } else {
                weatherMessage = ""
            }

            if (WeatherData.weather[0].description == "clear sky") {
                weatherDescription = "You might want to get some sunglasses"
            } else if (WeatherData.weather[0].description == "shower rain") {
                weatherDescription = "Make sure you have an umbrella"
            } else if (WeatherData.weather[0].description == "rain" && WeatherData.weather[0].description == "thunderstorm") {
                weatherDescription = "Grab an umbrella! It's pouring!"
            } else if (WeatherData.weather[0].description == "snow") {
                weatherDescription = "get your snowboots 'cause its snowin outside."
            } else {
                weatherDescription =""
            }
            setMessage(weatherMessage);
            setDescription(weatherDescription);

        } catch (error) {
            weatherMessage = "No zipcode, no attire suggestions. sorry..."
        }
    };

    setMessage = ({ WeatherData }) => {
        
    }



    return (
        <div className='asideContainer'>
            {message}
            {description}
        </div>
    )
}




export default Aside