ReactJS - значения возвращаются неопределенными из функции с параметрами

Question

У меня есть приложение реакции, и я пытаюсь преобразовать температуры в градусах Кельвина в градусы Фаренгейта.У меня есть простая настройка, но я получаю неопределенные значения от функции.

//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(...) ищет ключи 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