创建一个将更新状态的axios调用，然后执行另一个调用

Question

我有一个谜。我正在尝试基于一键点击执行两个HTTP Axios调用。基本上，第一个会给我带来正确的代币。我想更新组件的初始状态，然后用更新后的状态推送第二个调用。但第二个调用似乎没有等待第一个调用完成，这就是为什么我的状态没有更新，我无法显示任何内容。有人能帮我一把吗。我将在这里留下我的代码示例：

const [useFetchedToken, setUseFetchedToken] = useState();
const [useFetchedCustomerFromToken, setUseFetchedCustomerFromToken] = useState();
...
const fetchData = async () => {
const firstBody= {
url,
customer
};
const firstHeader = {
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': '*',
'Authorization': 'Bearer ' + token
}
};
const firstUrl = serverUrl + '/api/view/customer'
const secondBody = {
url,
customer : useFetchedCustomerFromToken,
startDate,
endDate
};
const secondHeader = {
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': '*',
'Authorization': 'Bearer ' + useFetchedToken
}
};
const secondUrl= serverUrl + '/api/view/user/invoices'
try {
const myFirstCall = await axios.post(firstUrl , firstBody, firstHeader)
const tokenFromResponse = response.data.token
setUseFetchedToken(tokenFromResponse)
setUseFetchedCustomerFromToken(jwt_decode(response).customer)
const mySecondCall = await axios.post(secondUrl, secondBody, secondHeader)
...
}

我看到状态得到了更新，但我担心无论它得到更新，都会执行调用，并且没有插入正确的数据

Answer 1

有几件事，但我将首先解决这个问题。

您的状态不会立即更新，因此您不能使用setState函数，然后立即访问state，因为它还没有更新。在随后的渲染中，它将是最新的。因此，您需要直接使用第一次调用的值，而不是通过state。所以，

const mySecondCall = await axios.post(secondUrl, secondBody, secondHeader)

必须是

const mySecondCall = await axios.post(secondUrl, 
{
url,
// use value, not state
customer : jwt_decode(response).customer,
startDate,
endDate
}, 
{
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': '*',
// use value, not state
'Authorization': 'Bearer ' + tokenFromResponse
}
})

然后你可以设置你的状态，就像你在之后所做的那样。

另一件事是您的州命名约定。建议use仅用于命名挂钩，因此不要执行const [useSomeState, setUseSomeState] = useState("")