我試圖在 React 中宣告一個函陣列件，以便我可以使用我的自定義鉤子進行 API 呼叫。我得到一個rules-of-hooks我的鉤子useGet不能在回呼中呼叫。在我看來，我是在宣告一個功能組件，我一定是遺漏了什么？
例子：
export const MyComponent = () => {
const [data, setData] = useState();
useEffect(() => {
const { getData } = useGet("myUrl");
setData(getData);
}, [getData]);
return (
<div>{data}</div>
);
};
uj5u.com熱心網友回復：
確實，鉤子只能在功能組件中呼叫，但鉤子也需要在組件的頂層呼叫。您試圖在 useEffect 中呼叫 useGet，這是不允許的。如果我沒記錯的話，您可能只需將const {getData} = useGet("myUrl");行向上移動 2 行，它應該可以作業。
uj5u.com熱心網友回復：
看來您實際上是從 useEffect 內部的回呼內部呼叫自定義掛鉤的。我們應該在組件函式的頂層呼叫 react hooks。
也許最好不要使用鉤子，而只是創建和匯入獲取函式或直接從 useEffect 內部呼叫 fetch api，就像 https://designcode.io/react-hooks-handbook-fetch-data-from-an-api
uj5u.com熱心網友回復：
您創建了一個功能組件是正確的。
讓我們回到 React 官方檔案，看看Hooks 的規則
僅在頂層呼叫 Hooks
不要在回圈、條件或嵌套函式中呼叫 Hook。相反，在任何提前回傳之前，始終在 React 函式的頂層使用 Hooks 。
在非頂層的任何位置呼叫鉤子都會導致意外行為。
uj5u.com熱心網友回復：
你不能在 useEffect 中呼叫鉤子。只需將其移至呼叫上方，如下所示：
const { getData } = useGet("myUrl");
useEffect(() => {
setData(getData);
}, [getData]);
據我了解，組件中的鉤子數量必須始終相同。在 useEffect 中呼叫 some 可能會導致鉤子有時被呼叫，有時不被呼叫，因為 useEffect 取決于更改變數的值。
（另外 - 就像旁注一樣 - 在您的代碼中，useEffect(()=>{const { getData } = useGet("myUrl");...}, [getData])您將檢查尚未宣告的變數（getData）中的更改。一旦您將鉤子呼叫放在 useEffect 之外，這確實會得到修復。）
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/529668.html
標籤：javascript反应