Question

我正在将App组件中的自调用函数传递给getBgColor组件的WeatherForecast函数。这会从子组件WeatherForecast中获取值，并将其传递到App组件以更新this.state.appColorClass。

* getBgColor函数位于componentDidUpdate()内，它会创建一个循环并使浏览器崩溃。新的反应，不知道如何解决这个问题。

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = { appColorClass: 'app-bg1' };
  }

  setAppColor(colorClass) {
    alert("set className");
    this.setState({ appColorClass: colorClass });
  }

  render() {
    return (
    <div className={"app-container " + this.state.appColorClass}>
      <div className="main-wrapper">

          <WeatherForecast getBgColor={color => this.setAppColor(color)} />

      </div>   
    </div> 
    );
  }
}


class WeatherForecast extends Component {
  componentDidUpdate() {
    console.log('Component DID UPDATE!')
      //The function `setAppColor` from `App` component is passed into `getBgColor`
      this.props.getBgColor(this.appColor(this.props.weather));
  }

  appColor(weatherData) {
    console.log("app color working");

    let temp = 0;
    if ( typeof weatherData === 'undefined' || weatherData === null ) {
      console.log(" initial Color went through");
      return 'app-bg1';
    }
    temp = Math.round(weatherData.list[0].main.temp - 273.15);
    if (temp <= -30) {
        return "app-bg1";
    }
    if (temp >= -29 && temp <= -21) {
        return "app-bg2";
    }
    if (temp >= -20 && temp <= -11) {
        return "app-bg3";
    }
    if (temp >= -10 && temp <= 4) {
        return "app-bg4";
    }
    if (temp >= 5 && temp <= 15) {
        return "app-bg5";
    }
    if (temp >= 16 && temp <= 24) {
        return "app-bg6";
    }
    if (temp >= 25 && temp <= 32) {
        return "app-bg7";
    }
    if (temp >= 33 && temp <= 38) {
        return "app-bg8";
    }
    if (temp >= 39) {
        return "app-bg9";
    }
  }

  render() {

    return (
      <div className="text-center col-xs-12">
         <h1 id="temp">{this.displayTemp(this.props.weather)}<sup>&deg;</sup></h1>
         <h1>{this.displayCity(this.props.weather)}</h1> 
      </div>
    );
  }
}

Answer 1

循环是递归的，因为在WeatherForecast组件安装（更新）之后，它调用getBgColor prop，它设置父状态，触发子更新，调用getBgColor ..你得到了照片。

老实说，我可能会建议稍微移动逻辑......因为weather作为道具传递然后颜色再次传递，它会更多＆＃34;反应＆＃34 ;喜欢在父组件中处理它。当数据向下游流动时，它更容易理解。假设您的要求引导您到达此职位，在setAppColor中添加一个简单的检查就可以解决问题。

setAppColor(colorClass) {
  alert("set className");
  // only set state if it's changing
  if (colorClass != this.state.appColorClass) {
    this.setState({ appColorClass: colorClass });
  }
}

Answer 2

我最终选择了Johnny Klironomos的建议，根据shouldComponentUpdate中的Property值返回true或false。

应用加载后，

* this.props.weather未定义，因为用户需要选择一个城市来查看其天气。

shouldComponentUpdate(nextProps) {
    if(this.props.weather === 'undefined'){
      return true
    }
    return this.props.weather !== nextProps.weather
  }

使用componentDidUpdate循环

2 个答案: