Question

我想将温度从摄氏温度改为华氏温度（反之亦然）但是我还没有找到解决这个问题的正确方法，我写了一个函数，它将摄氏温度转换为华氏温度，但它却给我一个错误。所以我需要一个能够打开我的大脑并向我解释的人哈哈（让我理解就是我所说的）。

这是我的代码：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 })
};

}

我想要做的是保持我的状态一个布尔值，所以如果华氏度为真，我可以进行转换并调用我的函数，但我认为不起作用的原因是因为我拉出了值来自我的天气状态对象，来自我的api电话。所以我想把这个值拉到一个单独的状态，这样我就可以用它进行转换。

---我想说的是，我希望能够在点击温度时在华氏温度和摄氏温度之间切换

Answer 1

我更新了您的代码以使用2个组件，其中温度以及与temp相关的所有内容都在WeatherData组件中定义。 temp使用props传递给它，并且总是在 Celcius 中传递。（NB !!!）

My CodePen

这里的主要思想是你有两个组件，其中temp作为prop传递给另一个组件。此组件还处理从C到F的转换，当用户单击span时，还使用函数getCorrectTemp()将C转换为F（也将其格式化为字符串。

注意：请记住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>
    }
  }
}

我还添加了加载状态，但是如果你不想要它，你可以删除它。只记得处理尚未从服务器收到临时状态的状态。

基于状态的函数执行，无法正常工作

1 个答案: