为什么更新的状态没有返回到我的组件？
为什么更新的状态没有返回到我的组件？
提问于 2022-04-24 02:23:35
我有一个用于移动导航的drawer，当我点击抽屉图标时，它打开的很好，关闭的很好。但是我正在尝试实现一个点击/关闭来关闭导航栏。因此，当用户单击或点击掉导航栏时，它应该关闭。但是，当抽屉关闭时，由于页面中缺少了ref，所以我收到了敲击错误。所以我想用一张支票看看抽屉是否是通过运行if (drawerIsOpen) { do...} else { dont...}打开的，奇怪的是，我没有从我的道具中接收更新的状态。抽屉按其应有的方式关闭并打开，但当我console.log(drawerIsOpen)时，它从未给出正确的状态。下面的代码应该可以解释我得到的一些信息。
const Drawer = ({ drawerIsOpen, handleDrawer, drawerButtonRef }) => {
const drawerRef = useRef(null);
function handleClickOutside(event) {
if (!drawerIsOpen) {
// always returns since state is always telling me the drawer is closed
return;
}
if (drawerRef.current.contains(event.target)) {
console.log('inside');
} else {
console.log('outside');
console.log(handleDrawer);
handleDrawer();
}
}
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('touchstart', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener('touchstart', handleClickOutside);
};
}, []);我的州是通过道具发送的。我的状态从以下组件开始：
const drawerButtonRef = useRef(null);
const [drawerIsOpen, setDrawerIsOpen] = useState(false);
const handleDrawer = () => {
setDrawerIsOpen((prevState) => !prevState);
};
return (
<>
<Drawer
drawerIsOpen={drawerIsOpen}
handleDrawer={handleDrawer}
drawerButtonRef={drawerButtonRef}
/>
</>
)Stack Overflow用户
回答已采纳
发布于 2022-04-24 02:30:28
尝试将drawerIsOpen作为依赖项传递。您的useEffect逻辑只被调用一次。
尝试以下几点：
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('touchstart', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener('touchstart', handleClickOutside);
};
}, [drawerIsOpen]);还需要将drawerRef添加到您希望使用此行为的元素中，否则在您的逻辑中包含它就没有意义了。
抽屉里也没有JSX元素.也许你忘了分享这篇文章了？
你也可以简化这个
const handleDrawer = () => {
setDrawerIsOpen((prevState) => !prevState);
};到这个
const handleDrawer = () => {
setDrawerIsOpen(!drawerIsOpen);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71985033
复制相关文章
相似问题
腾讯云开发者
