React父组件向子组件传自定义事件的状态更新问题

问题背景 #

希望在React中通过父组件转发自定义事件，让子组件自行处理状态变更，无需父组件直接管理子组件状态。但运行示例代码时，子组件的事件回调只能获取到index的初始值，无法获取实时更新后的状态，导致状态更新异常。

示例代码 #

ParentControl.tsx #

export default function ParentControl() {
    const divRef = useRef<HTMLDivElement>(null);

    const dispatchEvent = (e: CustomEvent) => {
        divRef.current.dispatchEvent(e);
    };

    return (
        <div ref={divRef} >
            <Child name="Child1" dispatcher={divRef} />
            <Child name="Child2" dispatcher={divRef} />

            <button onClick={() => dispatchEvent(new CustomEvent('prev', {detail: ''})) }>
                Prev
            </button>
            <button onClick={() => dispatchEvent(new CustomEvent('next', {detail: ''})) }>
                Next
            </button>
        </div>
    );
}

Child.tsx #

export type ChildProps = {
    name: string;
    dispatcher: RefObject<HTMLElement>;
};

export default function Child({ name, dispatcher }: ChildProps) {
    const [index, setIndex] = useState(0);

    const selectPrev = (event: CustomEvent) => {
        console.log(`Received event: ${event.type}, index: ${index}`);
        setIndex(index - 1);
    };

    const selectNext = (event: CustomEvent) => {
        console.log(`Received event: ${event.type}, index: ${index}`);
        setIndex(index + 1);
    };

    const printState = () => {
        console.log(`printState(): index: ${index}`);
    };

    useEffect(() => {
        const dispatch = dispatcher.current;

        dispatch.addEventListener("next", selectNext);
        dispatch.addEventListener("prev", selectPrev);

        return () => {
            dispatch.removeEventListener("next", selectNext);
            dispatch.removeEventListener("prev", selectPrev);
        };
    }, []);

    return (
        <div>
            <div>
                {name} Index: {index}
            </div>
            <button onClick={() => printState()}>Print</button>
        </div>
    );
}

核心原因 #

useEffect的依赖数组为空，导致事件回调函数在组件初始化时就被绑定到DOM元素上。这些回调会捕获初始渲染时的index值，后续组件状态更新时，旧的回调并没有被更新，因此始终只能拿到初始状态。

解决方案（不使用React Context API） #

方案1：使用函数式更新 #

直接通过setState的函数式更新方式获取最新状态，无需依赖捕获当前状态变量：

const selectPrev = (event: CustomEvent) => {
    console.log(`Received event: ${event.type}`);
    // 函数式更新自动传入最新的状态值
    setIndex(prevIndex => prevIndex - 1);
};

const selectNext = (event: CustomEvent) => {
    console.log(`Received event: ${event.type}`);
    setIndex(prevIndex => prevIndex + 1);
};

这种方式无需修改useEffect的依赖数组，因为回调不再依赖index变量，函数式更新会确保拿到最新的状态值。

方案2：动态更新事件监听器 #

如果事件处理逻辑需要依赖多个实时状态，可以将相关状态加入useEffect的依赖数组，每次状态变化时重新绑定事件监听器：

useEffect(() => {
    const dispatch = dispatcher.current;
    // 先移除旧的监听器，避免重复绑定
    dispatch.removeEventListener("next", selectNext);
    dispatch.removeEventListener("prev", selectPrev);
    
    // 绑定新的回调（已捕获最新状态）
    dispatch.addEventListener("next", selectNext);
    dispatch.addEventListener("prev", selectPrev);

    return () => {
        // 组件卸载时清理监听器
        dispatch.removeEventListener("next", selectNext);
        dispatch.removeEventListener("prev", selectPrev);
    };
}, [index]); // 将index加入依赖数组，状态变化时触发重新绑定

每次index更新后，都会生成新的回调函数并重新绑定，确保回调能获取到最新的状态值。

多事件类型扩展方案 #

如果后续需要支持多种事件类型，可以将事件处理逻辑封装成对象，统一管理：

const eventHandlers = {
    prev: () => setIndex(prev => prev - 1),
    next: () => setIndex(prev => prev + 1),
    reset: () => setIndex(0)
};

useEffect(() => {
    const dispatch = dispatcher.current;
    // 批量绑定事件监听器
    Object.entries(eventHandlers).forEach(([eventType, handler]) => {
        dispatch.addEventListener(eventType, handler as EventListener);
    });

    return () => {
        // 批量移除监听器
        Object.entries(eventHandlers).forEach(([eventType, handler]) => {
            dispatch.removeEventListener(eventType, handler as EventListener);
        });
    };
}, []); // 使用函数式更新时，依赖数组保持为空即可

这种方式能更清晰地管理多种事件，同时保持代码的可维护性。

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