我有一個從我的 api 獲得的帶有令牌的狀態：
const initialState = {
isAuth: false,
token: "",
};
我想在 Axios 實體中重用令牌：
const api = axios.create({
baseURL: `${baseUrl}`,
headers: {
Authorization: `Bearer ${token}`,
},
});
export default api;
問題是我無法通過 useSelector 讀取令牌：
const token = useSelector((state) => state.auth.token);
我收到錯誤訊息：
無效的掛鉤呼叫。鉤子只能在函陣列件的主體內部呼叫
有什么建議嗎？提前致謝
uj5u.com熱心網友回復：
我不確定您的 useSelector 被準確呼叫的位置（以及其他代碼片段放置在代碼中的位置），但您的特定錯誤訊息清楚地表明，您不是直接在功能組件內呼叫 useSelector-hook。
我建議您閱讀以下文章：Hooks Rules
那里說：
不要在回圈、條件或嵌套函式中呼叫 Hook。相反，總是在你的 React 函式的頂層使用 Hooks，在任何提前回傳之前
uj5u.com熱心網友回復：
您不能在函陣列件或其他鉤子之外使用鉤子。但是，您可以在沒有令牌的情況下創建 axios 實體，然后api在擁有它時更新實體 ( )（請參閱 axios 的Config Defaults）。
注意：您需要在設定令牌之前阻止您的應用使用 axios 實體。
定義api沒有authorization標題：
const api = axios.create({
baseURL: `${baseUrl}`,
});
在您的頂級組件之一中獲取令牌，并將其應用于 axios 實體默認值：
const App = () => {
const token = useSelector((state) => state.auth.token);
useEffect(() => {
if(token) {
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}
}, [token]);
}
uj5u.com熱心網友回復：
這是因為鉤子只能在 React Component 中使用。為了能夠檢索此狀態，理想的是將其存盤在localStorage中。localStorage可以在任何級別訪問（React 組件與否）
您需要以這種方式在 localStorage 中創建一個新值：
localStorage.setItem("myToken",value)
然后你可以像這樣在 axios 實體中使用它：
localStorage.getItem("myToken")
另外，我建議您使用 axios 的攔截器來處理令牌，這樣會更好
希望能幫助到你 ！
imo，您還應該使用 axios的攔截器來處理訪問令牌
資源 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/506897.html
標籤：javascript 反应 反应式 反应钩子 axios
上一篇：TypeScript：當其型別未定義時，省略泛型函式的尾隨引數
下一篇：更改按鈕單擊時的復選框值-反應