如何对我的JSX/CSS进行故障排除以避免这种混乱'；不会吧？

我有一个开关，可以在天气应用程序中将温度从摄氏度更改为华氏度。代码如下所示：

import React, { Component } from "react";

class Temperature extends Component {
  state = {
    unit: "metrics"
  };

  imperial = () => {
    this.setState({
      unit: "imperial",
      imperialTemp: Math.round(this.props.temp * (9 / 5) + 32),
      imperialMin: Math.round(this.props.temp1 * (9 / 5) + 32),
      imperialMax: Math.round(this.props.temp2 * (9 / 5) + 32)
    });
  };

  metrics = () => {
    this.setState({
      unit: "metrics"
    });
  };

  render() {
    if (this.state.unit === "metrics") {
      return (
        <div>
          <div className="temp">
            {this.props.temp}ºC |
            <span className="fahrenheit" onClick={this.imperial}>
              °F
            </span>
          </div>
          <div className="row">
            <div className="col">
              <div className="min-max">
                {this.props.temp1}ºC |
                <span className="fahrenheit" onClick={this.imperial}>
                  °F
                </span>{" "}
                | {this.props.temp2}ºC |
                <span className="fahrenheit" onClick={this.imperial}>
                  °F
                </span>
              </div>
            </div>
          </div>
        </div>
      );
    } else {
      return (
        <div>
          <div className="temp">
            {this.state.imperialTemp}
            <span className="celsius" onClick={this.metrics}>
              ºC |
            </span>
            ºF
          </div>
          <div className="row">
            <div className="col">
              <div className="min-max">
                {this.state.imperialMin}
                <span className="celsius" onClick={this.metrics}>
                  ºC |
                </span>
                ºF | {this.state.imperialMax}
                <span className="celsius" onClick={this.metrics}>
                  ºC |
                </span>
                ºF
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
}

export default Temperature;

import React，{Component}来自“React”；
类温度扩展组件{
状态={
单位：“指标”
};
帝国=（）=>{
这是我的国家({
单位：“帝国”，
帝国温度：数学回合（this.props.temp*（9/5）+32），
imperialMin:Math.round（this.props.temp1*（9/5）+32），
imperialMax:Math.round（this.props.temp2*（9/5）+32）
});
};
指标=（）=>{
这是我的国家({
单位：“指标”
});
};
render（）{
if（this.state.unit==“metrics”）{
返回(
{本道具温度}摄氏度|
华氏度
{this.props.temp1}ºC|
华氏度
{" "}
|{this.props.temp2}ºC|
华氏度
);
}否则{
返回(
{this.state.imperialTemp}
摄氏度|
华氏度
{this.state.imperialMin}
摄氏度|
ºF |{this.state.imperialMax}
摄氏度|
华氏度
);
}
}
}
输出默认温度；

问题是，我得到的不是一个干净的形象，而是一团乱

当我点击ºF将温度转换为华氏温度时，情况变得更糟

既然我只添加了一条当前温度线和一条最小/最大温度线，为什么会发生这种情况？为什么每个都有两个？那个些人怎么了？有什么建议吗？先谢谢你

更新：

我渲染了两次温度分量，这就是为什么会出现第一个图像。现在它很高兴地显示了这一点

但是，Cs的混乱仍然存在：

---

救命啊

根据您发布的代码，看起来

temp1

和

temp2

道具不是数字，并且您正在两次渲染

Temperature

组件

但是，如果不看到父组件，就很难知道。这将有助于使用父级更新代码，在父级中渲染

温度

问题

°C

s看起来像是

摄氏度

类的问题，如果您发布该代码，也会有所帮助

注意：如果在状态中切换数据，而不是有条件地呈现2个几乎相同的UI，则可以简化此代码。大概是这样的：

class Temperature extends Component {
  state = {
    unit: "metrics",
    tempClass: "celsius",
    temp: this.props.initialTemp,
    tempMin: this.props.initialTemp1,
    tempMax: this.props.initialTemp2
  };

  toggleUnits = () => {
    this.setState(prevState => prevState.unit === "metrics" ? {
      unit: "imperial",
      tempClass: "fahrenheit",
      temp: this.toFahrenheit(prevState.temp),
      tempMin: this.toFahrenheit(prevState.tempMin),
      tempMax: this.toFahrenheit(prevState.tempMax)
    } : {
      unit: "metrics",
      tempClass: "celsius",
      temp: this.toCelsius(prevState.temp),
      tempMin: this.toCelsius(prevState.tempMin),
      tempMax: this.toCelsius(prevState.tempMax)
    });
  };

  toFahrenheit = temp => Math.round(temp * (9 / 5) + 32)
  toCelsius = temp => Math.round((temp - 32) * (5 / 9))

  render() {
      const { temp, tempClass, tempMin, tempMax } = this.state;

      return (
        <div>
          <div className="temp">
            {temp}ºC |
            <span className={tempClass} onClick={this.toggleUnits}>
              °F
            </span>
          </div>
          <div className="row">
            <div className="col">
              <div className="min-max">
                {tempMin}ºC |
                <span className={tempClass} onClick={this.toggleUnits}>
                  °F
                </span>{" "}
                | {tempMax}ºC |
                <span className={tempClass} onClick={this.toggleUnits}>
                  °F
                </span>
              </div>
            </div>
          </div>
        </div>
      );
  }
}

类温度扩展组件{
状态={
单位：“指标”，
临时班：“摄氏度”，
temp:this.props.initialTemp，
tempMin:this.props.initialTemp1，
tempMax:this.props.initialTemp2
};
切换单位=（）=>{
this.setState（prevState=>prevState.unit==“metrics”{
单位：“帝国”，
临时课程：“华氏度”，
温度：这是toFahrenheit（前状态温度），
温度：这。toFahrenheit（前状态，tempMin），
tempMax:this.toFahrenheit（prevState.tempMax）
} : {
单位：“指标”，
临时班：“摄氏度”，
温度：这是toCelsius（prevState.temp），
tempMin:this.toCelsius（prevState.tempMin），
tempMax:this.toCelsius（prevState.tempMax）
});
};
toFahrenheit=temp=>数学四舍五入（temp*（9/5）+32）
toCelsius=temp=>Math.round（（temp-32）*（5/9））
render（）{
const{temp，tempClass，tempMin，tempMax}=this.state；
返回(
{temp}ºC|
华氏度
{tempMin}摄氏度|
华氏度
{" "}
|{tempMax}摄氏度|
华氏度
);
}
}

你是对的，我愚蠢地渲染了两次温度。我解决了这个问题。但是Cs的问题仍然存在。我已经更新了答案，查看

celsius

类，看看是否有问题。您确定

celsius

CSS没有问题吗？它应该类似于

fahrenheit

class。也许CSS有问题？