Выполнение функции на основе состояния, не работает правильно - PullRequest
Новая
       7

Выполнение функции на основе состояния, не работает правильно

0 голосов
/ 06 мая 2018

Я хочу изменить температуру с Цельсия на Фаренгейт (и наоборот), но я не нашел правильного подхода для решения этой проблемы, я написал функцию, которая переводит градусы Цельсия в Фаренгейт, но она выдает ошибку. Поэтому мне нужен кто-то, кто сможет открыть мой мозг и объяснить это мне, ха-ха (заставить меня понять, что я говорю).

Вот мой код: https://codepen.io/manAbl/pen/aGymRg?editors=0011

И я добавил в комментарий следующую функцию, которая не работает: 

convertingTemperature() {
const { Fahrenheit, Celcius } = this.state;

this.setState({
  Fahrenheit: true,
});

const _Celcius = this.state.weather.weather && this.state.weather.main.temp;

const _Fahrenheit = Math.round(_Celcius * 5 / 9 + 32);

if(Fahrenheit) {
  this.setState({ temp: _Fahrenheit })
};

}

То, что я хочу сделать, это удерживать в моем состоянии логическое значение, поэтому, если значение по Фаренгейту равно true, я могу выполнить преобразование и вызвать свою функцию, но причина, по-моему, не работает, потому что я вытаскиваю значение из моего объекта состояния погоды, который приходит из моего вызова API. Поэтому я хочу вывести это значение в отдельное состояние, чтобы с его помощью можно было выполнить преобразования.

--- Что я хочу сказать, так это то, что я хочу иметь возможность переключаться между градусами Фаренгейта и Цельсия при нажатии на температуру

1 Ответ

0 голосов
/ 06 мая 2018

Я обновил ваш код, чтобы использовать 2 компонента, где температура и все, что связано с температурой, определены в компоненте WeatherData. Температура передается ему с помощью реквизита и всегда передается в Цельсия . (NB !!!)

Мой CodePen

Основная идея здесь состоит в том, что у вас есть два компонента, где temp передается как prop другому компоненту. Этот компонент также обрабатывает преобразование из C в F, и когда пользователь щелкает диапазон, также преобразует C в F, используя функцию getCorrectTemp() (которая также форматирует его как строку.

Примечание: помните bind в событии onClick, иначе контекст this потерян. 

class WeatherData extends React.Component {

  constructor(props) {
    super(props);
    this.state = { isCelcius: true }
  }

  toggleIsCelcius() {
    this.setState({isCelcius: !this.state.isCelcius});
  }

  getCorrectTemp(temp, isCelcius) {
    if(this.state.isCelcius) return `${this.props.tempCelcius} C`;
    return `${(this.props.tempCelcius*9/5)+32} F`;
  }

  render() {
    const { main,name,icon,country,tempCelcius } = this.props;
    if(tempCelcius) {
      const tempFormatted = this.getCorrectTemp(tempCelcius, this.state.isCelcius);
      return (
        <div className='app-wrapper'>
          <p>{name},{country}</p>
          <small>{main}</small>
          <span onClick={this.toggleIsCelcius.bind(this)}>{tempFormatted}</span>
          <img src={icon} alt=''/>
        </div>
      );
    } else {
      return <div className='app-wrapper'>Loading ...</div>
    }
  }
}

Я также добавил состояние загрузки, но вы можете удалить это, если не хотите. Просто не забудьте обработать состояние, когда временная температура еще не была получена от сервера.

...