嗨，我正在構建一個 React 應用程式并收到無效的鉤子呼叫錯誤。我在此處和其他頁面上找到了一些有關此錯誤的帖子，但沒有一篇文章幫助我了解在這種情況下出了什么問題。
這是錯誤資訊
無效的鉤子呼叫。鉤子只能在函陣列件的主體內部呼叫。>這可能是由于以下原因之一而發生的： 1. 您的 React 和渲染器的版本可能不匹配（例如 React DOM） 2. 您可能違反了 Hooks 的規則 3. 您可能有多個副本同一應用程式中的 React 請參閱>https://reactjs.org/link/invalid-hook-call 以獲取有關如何除錯和修復此問題的提示。
15 | if (res.ok) {
16 | setSigned_in(true); res.json().then(r => {setRole(r.role); setProfile(r);}).catch(err => alert(err));
17 | } else {
18 | setSigned_in(false); (error comes from this lien!??)
| ^ 19 | setRole(null);
20 | }
21 | })()
這是由自定義鉤子內部的鉤子呼叫引起的
export const useLogin = () => {
const [signed_in, setSigned_in] = useState(null);
const [role, setRole] = useState(null);
const [profile, setProfile] = useState(null);
useEffect(() => {
(async () => {
const res = await fetch('/api/profile/', { method: 'GET', headers: { 'Authorization': 'Bearer ' localStorage.getItem('access_token') } });
if (res.ok) {
setSigned_in(true); res.json().then(r => {setRole(r.role); setProfile(r);}).catch(err => alert(err));
} else {
setSigned_in(false);
setRole(null);
}
})()
}, dependents);
return {
signed_in,
setSigned_in,
role,
profile,
setRole,
setProfile
}
據我所知，這應該是一個有效的鉤子呼叫，對嗎？所以應該是react的雙副本或者react和react-dom版本不匹配導致的？？但是，我不明白如何確定是否是這種情況。運行 npm ls 產生
├── @emotion/react@11.4.0
├── @emotion/styled@11.3.0
├── @fortawesome/fontawesome-svg-core@1.2.35
├── @fortawesome/free-solid-svg-icons@5.15.3
├── @fortawesome/react-fontawesome@0.1.14
├── @material-ui/core@5.0.0-beta.0
├── @material-ui/icons@5.0.0-beta.1
├── @material-ui/lab@5.0.0-alpha.39
├── @material-ui/styles@5.0.0-beta.1
├── @react-google-maps/api@2.2.0
├── @use-gesture/react@10.1.4
├── bindings@1.5.0 extraneous
├── bootstrap@5.0.2
├── chokidar@3.5.2
├── cra-append-sw@2.7.0
├── file-uri-to-path@1.0.0 extraneous
├── mdbreact@5.1.0
├── nan@2.14.2 extraneous
├── node-geocoder@3.27.0
├── react-dom@17.0.2
├── react-router-dom@5.2.0
├── react-scripts@4.0.2
├── react-spring@9.3.0
├── react@17.0.2
└── reactstrap@8.9.0
我只能看到一個 react 和 react 和 react-dom 都是 17.0.2 版本。
有沒有人知道解決這個問題的好方法，并可能解釋如何避免再次出現（它之前出現過多次，之前沒有解釋就消失了）
uj5u.com熱心網友回復：
嘗試在干凈的 React 應用程式上運行它，然后查看未定義的另一件事
uj5u.com熱心網友回復：
我認為這可能是一個紅鯡魚。對于您的效果掛鉤，依賴項應該是[]而不是dependents（這很可能undefined）。（在函式的末尾還有一個缺少的花括號。）
這能解決嗎？
export const useLogin = () => {
const [signed_in, setSigned_in] = useState(null);
const [role, setRole] = useState(null);
const [profile, setProfile] = useState(null);
useEffect(() => {
(async () => {
const res = await fetch('/api/profile/', { method: 'GET', headers: { 'Authorization': 'Bearer ' localStorage.getItem('access_token') } });
if (res.ok) {
setSigned_in(true); res.json().then(r => {setRole(r.role); setProfile(r);}).catch(err => alert(err));
} else {
setSigned_in(false);
setRole(null);
}
})()
}, []);
return {
signed_in,
setSigned_in,
role,
profile,
setRole,
setProfile
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/367343.html
標籤：javascript 反应 新产品经理 反应钩子 反应域
上一篇：使用Github包作為npm節點模塊時的Firebase云函式部署問題
下一篇：升級節點后無法決議依賴樹