Question

我有一个switch语句，该语句根据父组件的状态有条件地渲染具有某些道具的组件，例如：

switch(props.count) {
  case 1:
    return ( <MyComponent onButtonClick={props.handler1} onNextClick={props.next} /> );
  case 2:
    return ( <MyComponent onButtonClick={props.handler2} onNextClick={props.next} /> );
  ...
}

在每个组件中，我在this.state中设置一个布尔值，该值最初应该为false。调用某个处理程序方法时，props.count应该在父元素中更新，并且在下一种情况下定义的组件应该呈现。此方法有效，但是新组件不会获得默认标志值（false），而是保留先前组件的状态。为什么会这样？由于道具从一种情况变为另一种情况，是不是正在重建组件？

MyComponent：

constructor(props) {
  super(props);
  this.state = {
    flag: false,
  }
  this.myHandler = this.myHandler.bind(this);
}

myHandler() {
  this.setState({
    flag: true,
  });
  this.props.onButtonClick();
}

render () {
  return (
    <div>
      <Button onClick={this.myHandler} disabled={flag} />
      <Button onClick={props.next} disabled={!flag} />
    </div>
  );
}

Answer 1

尝试一下。我遇到过同样的问题，被迫使用此生命周期方法。您应该使用console.log检查传入的props和prevprops。查看它们是否已全部更新，如果有，则更改状态以匹配新的更新。

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props!== prevProps) {
    //set state here;
  }
}

有条件地渲染的React组件不会重置状态

1 个答案: