错误：请求失败，状态码 401：React.js 中未授权并使用 setState 进行授权

Question

注意 - 以下错误仅在第一次单击我的应用程序的“提交”按钮时发生，并且仅在第一次加载页面时发生。如果我再次单击“提交”按钮，它就可以正常工作。

为了从 API 获取数据，我使用了 axios.all，为了授权 JQL 查询，我需要用户名和密码。在调用 axios.all 之前设置授权字符串 (this.setState{authString}) 并且在每个 get 调用中，我使用 this.state.authString 进行授权。

onSubmit = (event) => {

    event.preventDefault();

    event.stopPropagation();

    let iNumber = event.target.iNumber.value;

    let pass = event.target.password.value;

    let query = CURRENT_SPRINT_INFO;

    if (!iNumber || !pass || !query) {

      alert("Enter Valid iNumber, password and sprint info");

      return;

    }

    this.loadData(iNumber, pass, query);

  }

  loadData = (iNumber, pass, query) => {

    notify.show("Loading...", "warning", 500);

    const authString = "Basic " + btoa(iNumber + ":" + pass);

    this.setState({

      authString: authString,

      loading: true

    });

    axios.all([this.getBacklogItemsData(query), this.getBugsData(query), this.getWaveItemsData(query)])

      .then(axios.spread((backlogItems, bugs, waveTasks) => {

        notify.show("data Loaded successfully", "success", 3000);

        const { adhocIssues, scrumBoardIssues } = this.getSeparateBIItems(backlogItems.data.issues);

        this.setState({

          adhocIssues: [...adhocIssues],

          scrumBoardIssues: [...scrumBoardIssues],

          bugs: [...bugs.data.issues],

          waveBoardTasks: [...waveTasks.data.issues],

          loading: false

        })

        // set session variables

        setUserDetails(iNumber, pass);

      }))

      .catch(error => {

        notify.show(`Error occurred while fetching data`, "error", 3000);

        this.setState({ loading: false });

        throw new error(error);

      })

  }

在第一次加载页面并单击我的提交按钮时，它会抛出错误：请求失败，状态码为 401：未授权 -> 当我调试和检查时，authString 为空，即 authString = "" -> 这发生在我的第一次GET 调用自身（即在 this.getBacklogItemsData(query) 中）

一旦我再次单击提交按钮，它就可以正常工作

灵感来自：https : //codesandbox.io/s/rm4pyq9m0o

Answer 1

为了从 API 获取数据，我使用了 axios.all，为了授权 JQL 查询，我需要用户名和密码。在调用 axios.all 之前设置授权字符串 (this.setState{authString}) 并且在每个 get 调用中，我使用 this.state.authString 进行授权。在事件处理程序中，只有当您退出事件处理程序时，react 才会刷新所有状态更改。这里我设置了一个例子 https://codesandbox.io/s/runtime-firefly-v59yk因此，在事件处理程序的执行期间，当您访问this.state.authString它时，它会为您提供进入事件处理程序的初始值。所以解决这个问题的一种方法是使用的第二个参数setState来确保状态已经更新并且组件已经重新渲染，就像这样this.setState({      authString: authString,      loading: true    }, () => axios.all(...));

Answer 2

因为 this.setState 是异步的。所以你可以像这样在 setState 中使用回调：this.setState({      authString: authString,      loading: true}, () => {   axios.all(...) // Call axios here to make sure setState done});更多信息，请在此处查看文档 setState