React状态更新后调用父函数及useReducer闭包问题咨询

问题原因 #

你之前的实现有两个核心问题：

• useEffect默认会在组件首次挂载时执行一次，所以没点击也会触发调用
• 手动调用updateFn时没有传入事件对象e，导致读取e.preventDefault时报错；如果是form内的按钮，默认type为submit，注释preventDefault会触发表单提交刷新页面

正确实现 #

方案1：无需useEffect，直接传最新值（最简洁） #

你要更新的counter值是你主动设置的，可以直接把新值作为参数传给updateFn，同时在点击事件触发时直接处理preventDefault：

// 子组件
export const Child = (props) => {
    const [counter, setCounter] = useState(0)

    function updateCounter(e) {
        e.preventDefault() // 点击时直接处理默认行为阻止
        const newCounter = 1
        setCounter(newCounter)
        props.updateFn(newCounter) // 直接传最新值给父组件
    }

    return (
        <button onClick={updateCounter}></button>
    )
}

// 父组件updateFn修改为接收参数
function updateFn(counter) {
    // 直接使用传入的最新counter即可，无需再处理事件
}

方案2：修正useEffect版本 #

如果必须等counter状态更新后再触发调用，可以加点击标记避免挂载执行，同时去掉对事件对象的依赖：

export const Child = (props) => {
    const [counter, setCounter] = useState(0)
    const [isTriggedByClick, setIsTriggedByClick] = useState(false)

    function updateCounter(e) {
        e.preventDefault()
        setCounter(1)
        setIsTriggedByClick(true)
    }

    useEffect(() => {
        if (isTriggedByClick) {
            props.updateFn(counter)
            setIsTriggedByClick(false) // 重置标记避免重复触发
        }
    }, [counter, isTriggedByClick, props.updateFn])

    return (
        <button onClick={updateCounter}></button>
    )
}

问题原因 #

你在子组件定义的someFn是闭包，它捕获的是函数创建那一刻的props.userActions.valueToUseIn_someFn值，后续state更新不会改变闭包里捕获的旧值，所以每次拿到的都是上一次的状态。
同时你的实现不符合useReducer的设计规范：reducer的状态应该只存可序列化的纯数据，存储函数会导致状态持久化、时间旅行调试等功能完全失效。

修复方案 #

不要把函数存在reducer状态里，可选两种实现：

方案1：存动作标识，统一处理逻辑（推荐） #

把要执行的动作改成字符串标识，所有需要的参数都存在状态里，执行时直接从最新状态读取：

// reducer初始状态移除函数字段
const [userActions, dispatch] = useReducer(reducer, {
    popup: false,
    valueToUseIn_someFn: "",
    actionType: "" // 存动作类型标识
});

// 子组件dispatch时仅传数据和动作标识
props.dispatch({
    type: "get-data",
    payload: {
        popup: true,
        valueToUseIn_someFn: someValue,
        actionType: "someFn"
    }
})

// 弹窗确认按钮点击逻辑
const handleConfirm = () => {
    const { valueToUseIn_someFn, actionType } = userActions
    switch(actionType) {
        case "someFn":
            // 直接从最新状态取值，无闭包问题
            console.log(valueToUseIn_someFn)
            // 执行对应逻辑
            break
        // 其他动作新增case即可
    }
    dispatch({type: "do-the-action"})
}

方案2：用ref存回调 #

如果逻辑必须放在子组件内，把回调存在ref中而不是reducer状态：

// 包装组件定义ref存回调
const actionCallbackRef = useRef(null)
// 透传给子组件

// 子组件打开弹窗时把回调存入ref，不要传给reducer
props.actionCallbackRef.current = () => {
    console.log(props.userActions.valueToUseIn_someFn)
}
props.dispatch({
    type: "get-data",
    payload: {
        popup: true,
        valueToUseIn_someFn: someValue
    }
})

// 弹窗确认时执行ref中的最新回调
const handleConfirm = () => {
    actionCallbackRef.current?.()
}

最佳实践 #

• reducer仅存储可序列化的纯数据，禁止存储函数、DOM节点、Promise等非序列化内容
• 避免闭包陷阱的核心是不要让函数捕获可能变化的状态，要么直接传参、要么从最新状态读取、要么用ref存储可变内容
• 事件的默认行为阻止尽量在事件触发的第一时间处理，不要跨组件传递事件对象

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