Ошибка: запрос не выполнен с кодом состояния 401: не авторизован в React.js и использует setState для авторизации

Question

Примечание. Следующая ошибка возникает только при первом нажатии кнопки «Отправить» в моем приложении и только при первой загрузке страницы. Если я снова нажму кнопку «отправить», она будет работать отлично.

Для извлечения данных из API я использую axios.all, а для авторизации запросов JQL мне нужны имя пользователя и пароль. Строка авторизации (this.setState {authString}) устанавливается перед вызовом axios.all, и внутри каждого из этих вызовов get я использую my.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-запросов мне нужны имя пользователя и пароль. Строка авторизации (this.setState {authString}) устанавливается перед вызовом axios.all, и внутри каждого из этих вызовов get я использую my.state.authString для авторизации.

В обработчиках событий реагируютсбрасывает все изменения состояния только при выходе из обработчика событий.

Здесь я настроил пример 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 здесь