错误：请求失败，状态码 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