React使用Antd Modal点击关闭按钮报is not a function错误如何解决

1 思路正确性确认 #

你通过useState维护布尔值控制Antd Modal显隐的思路是完全正确的，Antd Modal属于受控组件，显隐状态完全由传入的visible属性控制，修改对应state更新属性值是标准实现方式。

2 报错原因 #

你遇到的... is not a function错误由两处代码问题共同导致：

• 上下文取值顺序错误
  你在AppProvider中给AppContext传递的value数组顺序是[rooms, isAddRoomVisible, setIsAddRoomVisible]，但在AddRoomModal中取值时直接解构前两位赋值给isAddRoomVisible和setIsAddRoomVisible，此时你拿到的setIsAddRoomVisible实际是第二个位置的布尔值isAddRoomVisible，调用布尔值自然会抛出不是函数的错误。
• Modal回调属性写错
  Antd Modal的取消回调属性是onCancel，你写成了okCancel，okCancel是控制是否展示取消按钮的布尔属性，因此点击取消按钮、模态框右上角关闭叉、蒙层时都无法触发你写的handleCancel回调，即使解决了取值问题，这三个位置的关闭操作也会异常。

3 修复方案 #

步骤1：修正上下文取值顺序 #

把AddRoomModal中上下文取值的代码调整为和Provider传递的顺序一致：

// 原代码
// const [isAddRoomVisible, setIsAddRoomVisible] = useContext(AppContext)
// 修正后
const [, isAddRoomVisible, setIsAddRoomVisible] = useContext(AppContext)

如果后续需要用到rooms数据，也可以完整取值：

const [rooms, isAddRoomVisible, setIsAddRoomVisible] = useContext(AppContext)

步骤2：修正Modal的回调属性 #

把Modal组件的okCancel属性改为onCancel：

<Modal
  title="Create room"
  visible={isAddRoomVisible}
  onOk={handleOk}
  {/* 原代码 okCancel={handleCancel} */}
  onCancel={handleCancel}
>

额外优化建议 #

上下文传递的值如果字段较多，建议用对象而非数组传递，避免后续修改顺序导致取值错误，比如可以把Provider的value调整为：

<AppContext.Provider value={{rooms, isAddRoomVisible, setIsAddRoomVisible}}>
  {children}
</AppContext.Provider>

取值时直接解构对应字段即可，不需要关心顺序：

const {isAddRoomVisible, setIsAddRoomVisible} = useContext(AppContext)

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