Question

我希望更新状态，因为我从子组件获取了值但是由于某些奇怪的原因，如果我在我的方法中使用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()循环错误。

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

Answer 1

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

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

1 个答案: