ReactJs：为什么在呈现组件时ref.current返回null？

我有一个购物车内的按钮，我想给它一个动画每当购物车被打开。为了实现目标，我使用useRef并尝试登录控制台，结果如下：

const checkoutBtnRef = useRef("null");

    useEffect(() => {
        console.log(checkoutBtnRef.current);
    }, [cartOpen]);

问题是，当我打开购物车时，current为null，只有当我关闭购物车时，current才返回实际的按钮，我希望它是相反的。 有什么想法吗

完整组件代码

export default function TopNav() {
    const classes = useStyles();
    const [cartOpen, setCartOpen] = useState(false);
    const checkoutBtnRef = useRef("null");

    useEffect(() => {
        console.log(checkoutBtnRef.current);
    }, [cartOpen]);

    return (
        <>
            <Container maxWidth="xl">
                <div className={classes.root}>
                    <CardMedia
                        image="https://www.furnibay.lt/wp-content/uploads/2018/03/furnibay-nauajs.png"
                        className={classes.media}
                    />
                    <SearchBar placeholder="Search" className={classes.searchBar} />
                    <div className={classes.iconsContainer}>
                        <PersonIcon className={classes.icon} />
                        <FavoriteBorderIcon className={classes.icon} />
                        <Badge
                            invisible={false}
                            variant="dot"
                            color="error"
                            onClick={() => setCartOpen(true)}
                        >
                            <ShoppingBasketIcon className={classes.icon} />
                        </Badge>
                    </div>
                </div>
            </Container>
            <Drawer
                classes={{
                    paper: classes.cart,
                }}
                anchor="right"
                open={cartOpen}
                transitionDuration={{ enter: 500, exit: 200 }}
                onClose={() => setCartOpen(false)}
            >
                <div className={classes.topCartContent}>
                    <Typography variant="h5">Cart</Typography>
                    <CloseIcon
                        className={classes.closeIcon}
                        onClick={() => setCartOpen(false)}
                    />
                </div>
                <Divider />
                <List>
                    <CartItem />
                </List>
                <Button
                    classes={{
                        root: classes.checkoutBtn,
                    }}
                    variant="outlined"
                    onClick={() => setCartOpen(false)}
                    ref={checkoutBtnRef}
                >
                    checkout
                </Button>
            </Drawer>
        </>
    );
}

导出默认函数TopNav（）{
const classes=useStyles（）；
const[cartOpen，setCartOpen]=使用状态（false）；
const checkoutBtnRef=useRef（“null”）；
useffect（（）=>{
console.log（checkoutBtnRef.current）；
}，[cartOpen]）；
返回(
setCartOpen（真）}
>
setCartOpen（假）}
>
运货马车
setCartOpen（假）}
/>
setCartOpen（假）}
ref={checkoutBtnRef}
>
结账
);
}

编辑： 您的抽屉已延迟，您的按钮尚未呈现，因此您无法在cartOpen更改事件和

因此，使用它来存储和调用函数，而不是useEffect

 const checkoutBtnRef = (ref) => {
   console.log(ref);
   if (ref){
      // do ur staff here
   }
 };

如果您需要

useffect

您可以这样做：

  const [btnRef, setBtnRef] = useState(null);

  const checkoutBtnRef = (ref) => {
    if (ref) setBtnRef(ref);
  };

  useEffect(() => {
    console.log(btnRef);
  }, [btnRef]);

旧答案：

const-App=（）=>{
const[cart，setCart]=React.useState（false）；
const[btnRef，setBtnRef]=React.useState（null）；
常量签出BTNREF=（ref）=>{
如果（ref）设置为ref（ref）；
else setBtnRef（空）
};
React.useffect（（）=>{
控制台日志（btnRef）；
}，[btnRef]）；
常量cartHandler=（）=>{
设置超时（（）=>{
setCart（（上一个）=>！上一个）
},1000);
};
返回(
运货马车
{cart&&Check Out}
)
}
ReactDOM.render(
,
document.getElementById（“react”）
);

请输入完整的组件代码。@b3hr4d我发布了完整组件的代码！如果您需要任何进一步的细节，我将非常乐意提供！谢谢你的回答！我已经尝试过这种方法，它完全有道理，但由于某种原因，它在我的代码中不起作用。我发布了完整的组件代码，也许你会在我发布之前发现问题：D@Zakaria检查编辑后的答案。它现在可以工作了！我只想知道你做了什么，你是怎么做的！非常感谢你的耐心@扎卡里亚：不客气，我喜欢帮助别人。这是因为
ref
道具在react中是如何工作的，就像mouseEvent背后有逻辑一样。请阅读以下内容以了解更多信息：