javascript - ReactJS - 从带参数的函数返回未定义的值

Question

我有一个 react 应用程序，并尝试将开尔文温度转换为华氏温度。我有一个简单的设置，但我从函数中获取未定义的值。

//this is the cityweathercomponent
import React, { Component } from "react";

class CityWeather extends Component {

    // (280.89K − 273.15) × 9/5 + 32

    getFahrenheit = (now, minimum, maximum) => {

        let arr = [now , minimum , maximum];
        let result = [];

        for (let value of arr) {
            let num = (value - 273.15) * 9/5 + 32;
            result.push(num);
        }
        let current = result[0];
        let min = result[1];
        let max = result[2];

        console.log(result);

        return {current, min, max};
    };

    render(){

        let cityID = this.props.city;
        let weatherData = this.props.weatherData;

        let currentWeather = weatherData.list[0];
        let condition = currentWeather.weather[0].main;


        let {temp, minTemp, maxTemp} = this.getFahrenheit(currentWeather.main.temp, currentWeather.main.temp_min, currentWeather.main.temp_max);

        console.log(temp, minTemp, maxTemp);

        return(
            <div>
                <h2>condition</h2>
                <p>{condition}</p>

                <br/>
                <h2>current temp</h2>
                <p>{temp}</p>

                <br/>
                <h2>max temp</h2>
                <p>{maxTemp}</p>
                <br/>
                <h2>min temp</h2>
                <p>{minTemp}</p>
            </div>


        );
    }

}

export default CityWeather;

所以我是 this.getFahrenheit 函数中的临时值，其结果预计位于具有多个值的对象中。

这些参数将进入该函数并以华氏度进行转换。它们存储在一个数组中，并且每一个都被设置为变量。最后，它们作为对象 {current, min, max} 返回。

但是在控制台中，我得到了未定义的结果，并且不确定发生了什么。我看到了与我的类似的其他示例，结果还不错 - 我确信我在这里遗漏了一些东西。

我是 ReactJS 尤其是 ES6 的新手，所以我想了解这里发生了什么以及为什么它们被设置为未定义。最终目标是在渲染中显示新值，以正确的格式显示温度。我们将不胜感激您的帮助。

Answer 1

问题出在 render 中的以下行方法:

let {temp, minTemp, maxTemp} = this.getFahrenheit(currentWeather.main.temp, currentWeather.main.temp_min, currentWeather.main.temp_max);

方法this.getFahrenheit返回一个带有键 current 的对象, min ，和max ，但是符号 let {temp, minTemp, maxTemp} = this.getFahrenheit(...)寻找 key temp , minTemp ，和maxTemp在 this.getFahrenheit 的输出中。由于这些键不存在于输出中，因此变量的值 temp , minTemp ，和maxTemp全部变成undefined .

您可以使用 this.getFahrenheit 输出的键中定义的相同变量名称。 (变量: current 、 min 和 max )，如下所示:

let {current, min, max} = this.getFahrenheit(currentWeather.main.temp, currentWeather.main.temp_min, currentWeather.main.temp_max);

或者您可以将变量重命名为您当前使用的变量(变量: temp 、 minTemp 和 maxTemp ):

let {current: temp, min: minTemp, max: maxTemp} = this.getFahrenheit(currentWeather.main.temp, currentWeather.main.temp_min, currentWeather.main.temp_max);

有关更多信息，请参阅文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring