Question

当我尝试通过应用程序上的登录表单更改状态时，它给我一个错误：

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>
    );
  }
}

反应说，问题出在我使用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>
  );
}

我哪里出错了？我如何将函数作为道具传递是否有问题？

Answer 1

在componentWillUpdate或componentDidUpdate中使用循环或重复设置状态时会发生该错误。React限制了嵌套更新的数量以防止无限循环。

我建议您尝试这两种方式，首先，不要使用async，而要使用.then().catch，并在您的then中进行设置状态。 here you can see examples

或者，将if statement放在try之后，说如果有用户响应，请进入设置状态。

为什么更改我的状态会导致错误“超出最大更新深度”？

1 个答案: