React UseContext传值：侧边栏点击外部无法关闭问题求助

问题核心：你的LeftSidePanel组件里，Drawer的onClose回调仅写了() => !open，这没有实际触发父组件的状态更新——因为你只通过DrawerContext传递了状态值isDrawerOpen，没传递修改状态的方法setDrawerOpen，子组件没法通知父组件关闭侧边栏。

修改步骤： #

1. 在MetaTable中传递状态修改方法
   把DrawerContext的value改成包含状态和修改方法的对象，让子组件能拿到更新状态的能力：

   // MetaTable组件里的Provider部分修改
   <DrawerDataContext.Provider value={bookId}>
     <DrawerContext.Provider value={{ isDrawerOpen, setDrawerOpen }}>
       <LeftSidePanel />
     </DrawerContext.Provider>
   </DrawerDataContext.Provider>
   

   另外建议给isDrawerOpen加初始默认值，避免undefined：

   const [isDrawerOpen, setDrawerOpen] = useState(false);
   

2. 在LeftSidePanel中使用修改方法关闭侧边栏
   从DrawerContext中解构出isDrawerOpen和setDrawerOpen，然后在onClose回调里调用setDrawerOpen(false)：

   // LeftSidePanel组件修改
   import { useContext } from 'react';
   import { DrawerDataContext, DrawerContext } from './MetaTable'; // 根据实际路径调整
   import { Drawer, List, ListItem, ListItemText } from '@mui/material'; // 假设使用MUI组件库
   
   const LeftSidePanel = () => {
     const book = useContext(DrawerDataContext);
     const { isDrawerOpen, setDrawerOpen } = useContext(DrawerContext);
   
     return (
       <>
         <Drawer 
           open={isDrawerOpen} 
           onClose={() => setDrawerOpen(false)} 
           anchor='left'
         >
           <List style={{ width: 500 }}>
             {/* 这里可以渲染book的详情内容 */}
             <ListItem>
               <ListItemText primary={`记录ID: ${book.id}`} secondary={`内容: ${book.content}`} />
             </ListItem>
           </List>
         </Drawer>
       </>
     );
   };
   
   export default LeftSidePanel;
   

为什么这样改能解决问题： #

• Drawer组件的onClose会在点击外部、按下ESC时触发，现在回调里调用setDrawerOpen(false)，会更新父组件的isDrawerOpen状态，Context会同步这个状态给子组件，Drawer的open属性变为false，从而关闭侧边栏。
• 之前的() => !open只是做了一个逻辑取反的运算，没有触发React的状态更新流程，所以侧边栏不会有变化。

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