React / Material UI onClick 在给定两个函数时不起作用

Question

我在 React 组件中有这个 Material UI 按钮

interface ConfirmBorrowPopupProps{
    amount : number; 
    function: Function;

}

export function ConfirmBorrowPopup(borrowPopupProps: PropsWithChildren<ConfirmBorrowPopupProps>){
    const [open, setOpen] = useState(false)
 

    const handlePopupClickOpen = () => {
        setOpen(true);
    };
    
    const handlePopupClose = (value: string) => {
        setOpen(false);
    };

        return(
        <Box >
            
            <VaultButton  variant="contained" fullWidth={true}
            onClick={(event) => {handlePopupClickOpen();  borrowPopupProps.function?.()}}
            >
                {borrowPopupProps.children}
            </VaultButton>
</Box>)

哪个应该执行函数handlePopupClickOpen()和props.function?.().

handlePopupClickOpen() 所在位置

const handlePopupClickOpen = () => { setOpen(true); };

改变

const [open, setOpen] = useState(false); 

的状态

和 props.function?.() 是赋予按钮的函数。问题是，当我分别对每个函数使用 onClick 时，它们都按预期完美运行，但是当我像上面那样将它们放在一起时，只有borrowPopupProps.function?.() 函数执行。这是由于 React 如何处理状态更改而导致的问题吗？我很困惑，因为我已经在其他 StackOverflow 帖子上看过这个问题，并且没有一个解决方案似乎有效，而且我真的没有看到任何关于为什么 setOpen(true); 的解释。从未被调用过。

我尝试将函数borrowPopupProps.function?.()放在handlePopupClickOpen函数中，但仍然只有borrowPopupProps.function?.()像这样执行：

const handlePopupClickOpen = () => { borrowPopupProps.function?.(); setOpen(true); };

然后只调用按钮内部的handlePopupClickOpen

<VaultButton  variant="contained" fullWidth={true} onClick={handlePopupClickOpen} >

但它不起作用。有谁知道如何解决这个问题和/或为什么会发生这种情况？预先感谢

Answer 1

您的两个函数都在运行。我的猜测是您期望

setOpen(true)

是同步的。它不是。

open

变量的当前值不会改变。相反，React 请求使用新值进行新渲染。

来自文档：

这是因为 状态的行为就像快照。
更新状态会请求使用新状态值进行另一次渲染，但不会影响已运行的事件处理程序中的 JavaScript 变量。

修复：

const [open, setOpen] = useState(false)
useEffect(() => {
  open && borrowPopupProps.function?.()
}, [open])

return (
  // ...
  <VaultButton onClick={() => setOpen(true)}>
    {borrowPopupProps.children}
  </VaultButton>
  // ...
)

请注意，每次

borrowPopupProps.function?.()

更改为

open

时，都会运行

true

。如果您不希望这样，则必须使用另一个状态位控制将

open

设置为

true

才能触发可选功能。