Question

我知道当组件在setState或componentWillUpdate内重复调用componentDidUpdate时会发生这种情况，但是就我的情况而言，即使在此之后我只调用了setState这个错误。这是我的state和componentDidUpdate：

constructor(props) {
    super(props);
    this.state = { usernameAlreadyUsing: false };
}

componentDidUpdate() {
    if(this.props.usernames.includes(this.props.username)) {
        this.setState({ usernameAlreadyUsing: true });
    }
}

Answer 1

每次setState被称为componentDidUpdate时都会回想起来。所以这种情况会使您进入无休止的循环。

在这里尝试

constructor(props) {
  super(props);
  this.state = { usernameAlreadyUsing: false };
}
componentDidUpdate() {
     const { usernameAlreadyUsing } = this.state;
    if(this.props.usernames.includes(this.props.username) && !usernameAlreadyUsing) {
        this.setState({ usernameAlreadyUsing: true });
    }
}

通过此实现，您的代码仅在componentDidUpdate中输入一次。

希望它能起作用。

Answer 2

constructor(props) {
    super(props);
    this.state = { usernameAlreadyUsing: false };
}

componentDidUpdate(prevProps) {
if(this.props.usernames.length != prevProps.usernames.length) {
         if(this.props.usernames.includes(this.props.username)) {
        this.setState({ usernameAlreadyUsing: true });
    }
    }
  
}

尝试。这是您上面的问题，一旦其设置用户名已经存在，则每次条件成功时都会再次调用setState。试试这个

希望它会有所帮助。毫无疑问地

React Native：不变违反：最大更新深度超出错误

2 个答案: