React Native：不變違規：超過最大更新深度錯誤

Question

我知道當組件在componentWillUpdate或componentDidUpdate中重復調用setState時會發生這種情況，但在我的情況下，即使我在此之后僅調用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

每次調用componentDidUpdate的setState都會重新調用自己。 所以這種情況會導致你進入一個無限循環。

來試試這個

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 因為條件每次都成功。 嘗試這個

希望對您有所幫助。如有疑問，請隨意