css - 如何对我的 JSX/CSS 进行故障排除，以免发生这种困惑？

Question

我有一个切换开关，可以在天气应用程序中将温度从摄氏度更改为华氏度。代码是这样的:

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;

问题是，我得到的不是干净的图像，而是一团糟

当我单击 ºF 更改为华氏度时，情况会变得更糟；

由于我只为每个条件添加一条当前温度线和一条最小/最大线，为什么会这样？为什么每个显示两个？ ºC 是怎么回事？有什么建议吗？提前谢谢你。

更新:

我渲染了两次温度组件，这就是第一张图像出现的原因。现在它很高兴地显示这个

但是 C 的困惑仍然存在:

帮助!

Answer 1

根据您发布的代码，看起来 temp1 和 temp2 Prop 不是数字，您正在渲染 Temperature 组件两次。

但是，不看父组件就很难知道。这将有助于更新您的父级代码，您正在渲染 Temperature。

°C 问题看起来像是 celsius 类的问题，如果您发布该代码也会有所帮助。

注意:如果您切换状态中的数据，而不是有条件地呈现 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>
      );
  }
}