从prop更新更新状态将导致循环错误

Posted 2021-04-08

我想更新状态，我从子组件得到的值，但由于一些奇怪的原因，如果我在我的方法中使用setstate，我将得到循环错误。这是我的代码片段：

class ParentTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      displayVal : '0',
    };
  }

  totalRec = value => {
    console.log('value', value); // will show the value '2' after getting it from ChildTab component 
    if (value) {
      // will cause infinite loop error
      this.setState({
        displayVal: value.toString(),
      });
    }
}

  render() {
    console.log('totalRec', this.totalRec()); // will show undefined because there is delay in getting the value.
    return (
      <div>
        <ChildTab totalRow={this.totalRec} {...this.props} />
        />
        Value: {this.state.displayVal} // will show undefined
      </div>
    );
  }
}

ChildTab组件将从数据库中获取价值，因此会有延迟。整个页面将首先渲染，因此this.totalRec()未定义。这就是为什么我想用state重新渲染它。

但是，如果触发totalRec()方法，当我尝试在react方法中使用this.setState时，我将得到totalRec()循环错误。

我该如何解决这个问题？提前致谢。

答案

1. 要打破循环，你可以简单地返回false中的shouldComponentUpdate(nextProps, nextState)，当this.state.displayVal === nextState.displayVal或更合适的条件基于你的问题。请参阅：https://reactjs.org/docs/react-component.html#shouldcomponentupdate
2. 另一个问题可能是setState不会立即触发，因此任何代码依赖于state可能会使用旧值，如果你在setState之后调用它。解决方案是编写async函数和await this.setState({...});。请参阅：https://reactjs.org/docs/react-component.html#setstate
3. 传入子组件的props应该是只读的。不要在子组件中更改它们。