setState 回调未按预期工作

Question

loading: true我有一个正在运行的应用程序，我只是想在我的应用程序进行提交调用时将状态设置为，以便我可以显示加载屏幕。因为我想确保在进行加载调用之前设置状态，所以我使用回调。但是，我没有看到以下代码的加载更新：

submitSecurityAnswer = () => {
    const { submit, handleError, navigate } = this.props;
    const { answer } = this.state;

    this.setState({ loading: true }, () => {
      console.log('setState', this.state)
      try {
        submit({ answer, ...this.props }).then(({ errors, status }) => {
          this.setState({ answer: '' });
          if (status && status === 200) {
            navigate();
          } else if (status === 401) {
            this.setState({ showError: true });
          } else {
            handleError(errors[0]);
          }
        });
      } catch (err) {
        console.log(err);
      }
    });

    this.setState({ loading: false });
  };

当我检查控制台日志时，我发现状态尚未更新并且加载仍然错误。

我在这里缺少什么？

Answer 1

发生这种情况是因为您this.setState({ loading: false });在函数末尾调用。

你正在设置loading: true并且loading: false同时。当您调用回调时，最后一个 setState 函数也会将状态值更改为 false。

收到请求后，您应该将加载状态设置为 false：

submitSecurityAnswer = () => {
  const { submit, handleError, navigate } = this.props;
  const { answer } = this.state;

  this.setState({ loading: true }, () => {
    console.log('setState', this.state)
    try {
      submit({ answer, ...this.props }).then(({ errors, status }) => {
        this.setState({ answer: '' });
        if (status && status === 200) {
          navigate();
        } else if (status === 401) {
          this.setState({ showError: true, loading: false });
        } else {
          handleError(errors[0]);
        }
      });
    } catch (err) {
      console.log(err);
    }
  });
};