我有一個 React Hook 用于在調整大小時設定視窗大小，但它似乎沒有更新。誰能解釋一下為什么這不起作用，以及如何在另一個組件中使用這個鉤子來設定一個布林值來檢查視窗大小是否在移動范圍內？首先，這是鉤子：
import { useState, useEffect } from 'react';
type WindowSize = {
width: number,
height: number,
};
export const useWindowSize = (): WindowSize => {
const [windowSize, setWindowSize] = useState<WindowSize>({
width: 0,
height: 0,
});
useEffect(
() => {
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
console.log(`resizing: width = ${windowSize.width} / height = ${windowSize.height}`);
// console.log(`resizing: width = ${window.innerWidth} / height = ${window.innerHeight}`);
}
window.addEventListener('resize', handleResize);
handleResize();
return () => window.removeEventListener('resize', handleResize);
},
[],
);
return windowSize;
};
在我的應用程式中，我為鉤子設定了一個 const 變數：
const {width, height} = useWindowSize();
最初，我注意到這總是只在應用程式啟動時設定一次（有時只是{0,0}）。但后來我注意到鉤子本身并沒有在視窗調整大小時內部更新。
有任何想法嗎？
uj5u.com熱心網友回復：
它按預期作業，您只需記錄陳舊的值。
過時的值是由于在分配給回呼windowSize的范圍內關閉了值。handleResizeaddEventListener
通過從以下位置登錄查看正確的結果useEffect：
export const useWindowSize = (): WindowSize => {
const [windowSize, setWindowSize] = useState<WindowSize>({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
console.log(windowSize);
}, [windowSize]);
useEffect(() => {
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight
});
}
window.addEventListener("resize", handleResize);
handleResize();
return () => window.removeEventListener("resize", handleResize);
}, []);
return windowSize;
};
- https://codesandbox.io/s/react-typescript-forked-cvx0bg?file=/src/App.tsx:546-562
- 請參閱諸如此類的常見“陷阱”的相關問題使用。
useEffect
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/466995.html