React18子组件调用父组件传入update方法报TypeError错误

报错和函数绑定、箭头函数写法无关，核心错误是子组件的Props接收语法不符合React规则：

• React函数组件仅接收1个入参：承载所有父组件传值的Props对象
• 现有代码写的const CreateHOA = (uid, { update }) => {}把uid作为第一个入参（实际这个位置拿到的是整个Props对象），试图从不存在的第二个入参里解构update，最终update实际值为undefined，调用时自然抛出"not a function"错误。
• 之前打印看到update是函数属于打印位置/写法错误，实际运行时子组件作用域内的update根本没有被正确赋值。

第一步：修正子组件Props解构 #

所有父组件传入的属性都要从第一个Props参数里解构，修改子组件定义行：

// 原错误写法
// const CreateHOA = (uid, { update }) => {

// 修正后
const CreateHOA = ({ uid, update }) => {
    const [loading, setLoading] = useState(false)
    const nameRef = useRef()

    const submit = event => {
        event.preventDefault()
        setLoading(true)
        console.log('UID', uid)
        // 修正后uid也能拿到正确的字符串值，之前错误写法下uid是整个Props对象
        addHoa(uid, nameRef.current.value).then(res => {
            console.log(res)
            update()
        })
    }

    // 其余JSX返回逻辑保持不变
}

第二步：修复父组件闭包问题（建议优化，避免后续状态异常） #

父组件内setAction调用存在闭包拿到旧状态的风险，改成函数式更新写法保证状态正确：

// 原写法
// setAction({...action, createHoa: false })

// 修正后
setAction(prev => ({...prev, createHoa: false }))

如果需要消除useEffect的依赖告警，可以把update函数用useCallback包裹，不做这步也不会影响当前功能运行。

修改完成后，子组件能正确拿到父组件传入的update方法，调用后会正常触发父组件状态更新和重渲染，报错消失。

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