錯誤：請求失敗，狀態碼 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

因為 this.setState 是異步的。 因此，您可以像這樣使用帶有 setState 的回調：

this.setState({
      authString: authString,
      loading: true
}, () => {
   axios.all(...) // Call axios here to make sure setState done
});

更多信息，請在此處查看文檔 setState

Answer 2

為了從 API 獲取數據，我正在使用 axios.all 並且為了授權 JQL 查詢，我需要用戶名和密碼。 在調用 axios.all 之前設置了一個授權字符串（this.setState{authString}），在每個 get 調用中，我使用我的 this.state.authString 進行授權。

在事件處理程序中反應刷新所有 state 更改僅在您退出事件處理程序時。

這里我設置一個例子https://codesandbox.io/s/runtime-firefly-v59yk

因此，在執行事件處理程序期間，當您訪問this.state.authString時，它會為您提供輸入事件處理程序的初始值。

所以解決這個問題的一種方法是使用setState的第二個參數來確保 state 已經更新並且組件已經重新渲染，就像這樣

this.setState({
      authString: authString,
      loading: true
    }, () => axios.all(...));