gpt4 book ai didi

javascript - 错误: Request failed with status code 401 : Unauthorized in React. js并使用setState进行授权

转载 作者:行者123 更新时间:2023-12-01 00:32:51 26 4
gpt4 key购买 nike

注意 - 仅在第一次单击我的应用程序的“提交”按钮并且仅在首次加载页面时才会发生以下错误。如果我再次单击“提交”按钮,则效果非常好。

为了从 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

最佳答案

For fetching data from an API I am using axios.all and in order to authorize the JQL queries I need username and password. An authorization string (this.setState{authString}) is set before calling axios.all and inside each of these get calls, I use my this.state.authString for authorization.

在事件处理程序中,仅当您退出事件处理程序时,React 才会刷新所有状态更改。

这里我举了一个例子 https://codesandbox.io/s/runtime-firefly-v59yk

因此,在事件处理程序执行期间,当您访问 this.state.authString 时,它会为您提供输入的初始值事件处理程序。

因此解决该问题的一种方法是使用 setState 的第二个参数确保状态已更新并且组件已重新渲染,如下所示

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

关于javascript - 错误: Request failed with status code 401 : Unauthorized in React. js并使用setState进行授权,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58362400/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com