Почему изменение моего состояния вызывает ошибку "Превышена максимальная глубина обновления"?

#reactjs #react-router

#reactjs #реагировать-маршрутизатор

Вопрос:

Когда я пытаюсь изменить состояние через форму входа в мое приложение, оно выдает сообщение об ошибке:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Я не вижу, где я вызвал бесконечный цикл. Вот app.js где возникает проблема:

 class App extends React.Component {
  state = {
    email: '',
    password: '',
    loggedIn: false,
    token: '',
    posts: [],
    title: '',
    description: '',
    postSubmitted: false,
  };

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  logIn = async () => {
    try {
      const response = await Axios.post(
        'http://localhost:3000/api/user/login',
        {
          email: this.state.email,
          password: this.state.password,
        },
      );
      //REACT SAYS THE ERROR OCCURS HERE!
      this.setState({
        loggedIn: true,
        token: response.data,
      });
      console.log(this.state);
    } catch (err) {
      console.log(err.response);
    }
  };

  //other code

  render() {
    return (
      //components

      <Route path="/login">
        <Login
          handleChange={this.handleChange}
          logIn={this.logIn}
          loggedIn={this.state.loggedIn}
        />
      </Route>
    );
  }
}

React говорит, что проблема возникает, когда я использую this.setState для установки значений для loggedIn и token , но я не уверен, как это вызывает цикл. Вот мой LoginForm.js файл, в котором я передаю свою функцию входа в систему в качестве реквизита:

 function LoginForm(props) {
  const loggedIn = props.loggedIn;
  return loggedIn ? (
    <Redirect to={'/'} />
  ) : (
    <div className="login-cont">
      <h1>Log In</h1>
      <label> Email adress</label>
      <br />
      <input
        type="text"
        id="email"
        name="email"
        placeholder="John@email.com"
        onChange={props.handleChange}
      />
      <br />
      <label> Password</label>
      <br />
      <input
        type="text"
        id="password"
        name="password"
        placeholder="Password"
        onChange={props.handleChange}
      />
      <br />
      <input type="submit" onClick={props.logIn} />
    </div>
  );
}

Где я ошибся? Это проблема с тем, как я передал функции в качестве реквизита?

1. В данном коде не вижу ничего, что могло бы это сделать. Что еще происходит при изменении loggedIn/token ? Есть ли у вас какие-либо методы жизненного цикла, такие как componentDidUpdate ? Вызываете ли вы какие-либо функции в рендеринге?

2. Когда я меняю loggedin значение на true, оно перенаправляет со страницы входа на страницу hom. У меня нет componentDidUpdate и я не вызываю никаких функций в методе жизненного цикла рендеринга.

3. Можете ли вы попробовать преобразовать это в воспроизводимый пример в работающем codesandbox?

Ответ №1:

Эта ошибка возникает, когда цикл или повторно установленное состояние использует into componentWillUpdate или componentDidUpdate .React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы.

я предлагаю вам попробовать эти два способа, сначала вместо использования async , используйте .then().catch , а в вашем then сделайте свое установленное состояние. здесь вы можете увидеть примеры

или, в качестве альтернативы, поставьте if statement после вашего try и скажите, если у вас был пользователь в ответе, выполните установленное состояние.