React/Material UI按钮onClick绑定双函数仅其一生效问题

可能的原因 #

• 传入函数含中断组件生命周期的逻辑：比如该函数内有页面跳转、组件卸载，或是调用了event.preventDefault()/event.stopPropagation()，导致React异步状态更新还未完成，组件就已被销毁或跳转，open状态的变化无法体现。
• 状态更新的异步特性：React的setState是异步操作，若传入函数执行后直接改变组件上下文（比如触发父组件重新渲染导致当前组件props变化或卸载），setOpen(true)的更新会被忽略。
• 参数命名不规范：接口中使用JavaScript关键字function作为参数名，虽TypeScript编译可能通过，但属于不规范写法，易引发潜在执行异常。

解决方法 #

1. 调整传入函数的执行逻辑
   检查父组件中传入的函数，若存在页面跳转或组件卸载操作，可延迟执行给状态更新留时间：

   // 父组件中修改传入的函数
   const handleBorrow = () => {
     setTimeout(() => {
       window.location.href = '/target-page'; // 延迟跳转确保状态更新完成
     }, 100);
   };
   

   若函数内有阻止事件传播的代码，需调整执行顺序，避免影响当前组件的状态更新。

2. 修正接口参数命名
   将接口中的function替换为合法名称（如onConfirm），同时明确参数类型：

   interface ConfirmBorrowPopupProps{
       amount : number; 
       onConfirm: () => void; // 替换关键字，指定函数类型
   }
   
   export function ConfirmBorrowPopup(borrowPopupProps: PropsWithChildren<ConfirmBorrowPopupProps>){
       // 其余代码不变
       return(
           <Box >
               <VaultButton  variant="contained" fullWidth={true}
                   onClick={() => {
                       handlePopupClickOpen();
                       borrowPopupProps.onConfirm?.();
                   }}
               >
                   {borrowPopupProps.children}
               </VaultButton>
           </Box>
       )
   }
   

3. 状态提升避免组件提前卸载
   若传入函数会触发父组件卸载当前弹窗，可将open状态提升到父组件，解耦弹窗显示与业务逻辑：

   // 父组件示例
   function ParentComponent() {
     const [popupOpen, setPopupOpen] = useState(false);
   
     const handleBorrow = () => {
       // 先执行业务逻辑
       // ... 业务代码
       setPopupOpen(true); // 由父组件控制弹窗显示
     };
   
     return (
       <>
         <ConfirmBorrowPopup amount={100} onConfirm={handleBorrow}>
           确认借款
         </ConfirmBorrowPopup>
         {popupOpen && <YourPopupComponent onClose={() => setPopupOpen(false)} />}
       </>
     );
   }
   

4. 用useEffect确保状态更新后执行函数
   通过useEffect监听open状态，确保状态更新完成后再执行传入的函数：

   export function ConfirmBorrowPopup(borrowPopupProps: PropsWithChildren<ConfirmBorrowPopupProps>){
       const [open, setOpen] = useState(false);
   
       useEffect(() => {
         if (open) {
           borrowPopupProps.onConfirm?.();
         }
       }, [open, borrowPopupProps.onConfirm]);
   
       const handlePopupClickOpen = () => {
           setOpen(true);
       };
       
       const handlePopupClose = (value: string) => {
           setOpen(false);
       };
   
       return(
           <Box >
               <VaultButton  variant="contained" fullWidth={true} onClick={handlePopupClickOpen}>
                   {borrowPopupProps.children}
               </VaultButton>
               {open && <Dialog open={open} onClose={handlePopupClose}>...</Dialog>}
           </Box>
       )
   }
   

内容的提问来源于stack exchange，提问作者HighPoint