function useRequest() {
const [accessToken, setAccessToken] = useState(42);
const [refreshToken, setRefreshToken] = useState(7);
const request = async (url) => {
try {
const res = await axios.get(url, { Headers: { Auth: accessToken } });
} catch (error) {
if (error.response.status === 401) {
refresh(() => request(url));
}
}
}
const refresh = async (callback) => {
const res = await axios.get("myserver.com", { params: { refreshToken }});
setAccessToken(res.data.accessToken);
callback()
}
return request;
}
所以我想呼叫這個api并在它過期時重繪 訪問令牌。問題是，當我在重繪 函式中設定訪問令牌狀態時，回呼會以舊狀態呼叫，因為 setState 是異步的。在其他情況下，我可以只使用 useEffect 但我不確定在這種情況下該怎么做。
uj5u.com熱心網友回復：
我認為你想存盤accessToken在 aref而不是 in state。
官方反應檔案：https : //reactjs.org/docs/hooks-reference.html#useref
useState 是異步的，因為 React 假定狀態與 UI 相關，因此狀態更新與 React 渲染生命周期耦合。
更新ref是同步的，并且是持久化不需要觸發 UI 更新的資料的好選擇。
您的代碼，但使用 useRef
function useRequest() {
const accessTokenRef = useRef(42);
const [refreshToken, setRefreshToken] = useState(7);
const request = async (url) => {
try {
const res = await axios.get(url, { Headers: { Auth: accessTokenRef.current } });
} catch (error) {
if (error.response.status === 401) {
refresh(() => request(url));
}
}
}
const refresh = async (callback) => {
const res = await axios.get("myserver.com", { params: { refreshToken }});
accessTokenRef.current = res.data.accessToken;
callback()
}
return request;
}
uj5u.com熱心網友回復：
如果您useEffect出于任何原因不想使用，另一種選擇是將您設定的狀態傳遞給request函式，以便它不依賴于外部變數。
const request = async (url, accessToken = 42) => {
try {
const res = await axios.get(url, { Headers: { Auth: accessToken } });
} catch (error) {
if (error.response.status === 401) {
refresh((accessToken) => request(url, accessToken));
}
}
}
const refresh = async (callback) => {
const res = await axios.get("myserver.com");
const { accessToken } = res.data;
setAccessToken(accessToken);
callback(accessToken);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/397938.html
標籤：javascript 反应 反应钩子 使用状态
上一篇：ReactHook"useParams"在函式"fetchMentors"中呼叫，該函式既不是React函陣列件也不是自定義ReactHook函式