React useReducer dispatch回调问题：如何获取新创建状态项

你遇到的核心问题是React的状态更新是异步的：调用daysDispatch后，组件不会立刻重新渲染，days数组还是旧值，所以第二次find肯定找不到新创建的Day。用setTimeout是不可靠的，因为你无法确定状态更新完成的时间，容易出现时序问题。

下面是几种可靠的解决方案：

方案1：直接返回新创建的Day对象（推荐） #

既然你明确要创建的Day结构，在调用dispatch之前先构造出这个对象，直接返回给调用方。这样调用方立刻能拿到结果，同时dispatch会触发状态更新，后续组件重新渲染后，days数组会自动包含这个新对象。

修改useDays中的getDayByDate：

export default function useDays() {
    const days: Day[] = useContext(DaysContext);
    const daysDispatch: DaysDispatch = useContext(DaysDispatchContext);

    return {
        getDayByDate: (date: Date): Day => {
            let day = days.find(day => day.date.toDateString() === date.toDateString());
            if (!day) {
                // 先构造新的Day对象
                day = {
                    date: date,
                    note: null
                };
                // 触发状态更新
                daysDispatch({
                    type: 'create',
                    data: day
                });
            }
            return day;
        }
    };
}

你的调用代码不需要修改，handleDayChange里的setCurrentDay能立刻拿到正确的Day对象，后续组件重新渲染时，currentDay也会和days数组中的值保持一致。

方案2：用useEffect监听状态变化（适合需要在状态更新后执行操作的场景） #

如果你的业务逻辑需要等待状态真正更新完成后再执行（比如依赖最新的days数组做其他操作），可以通过useEffect监听days的变化，在状态更新后触发后续逻辑。

首先修改useDays，把days也暴露出来：

export default function useDays() {
    const days: Day[] = useContext(DaysContext);
    const daysDispatch: DaysDispatch = useContext(DaysDispatchContext);

    return {
        days, // 暴露days数组
        getDayByDate: (date: Date): void => {
            const exists = days.some(day => day.date.toDateString() === date.toDateString());
            if (!exists) {
                daysDispatch({
                    type: 'create',
                    data: { date }
                });
            }
        }
    };
}

然后在调用组件中，用useEffect监听days和目标日期的变化：

const { days, getDayByDate } = useDays();
const [currentDay, setCurrentDay] = useState<Day | null>(null);
const [selectedDate, setSelectedDate] = useState<Date | null>(null);

const handleDayChange = (e) => {
    const date = new Date(e.target.value);
    setSelectedDate(date);
    getDayByDate(date);
};

// 当days更新或selectedDate变化时，查找并设置currentDay
useEffect(() => {
    if (selectedDate) {
        const day = days.find(d => d.date.toDateString() === selectedDate.toDateString());
        if (day) {
            setCurrentDay(day);
            setSelectedDate(null); // 重置，避免重复触发
        }
    }
}, [days, selectedDate]);

方案3：封装带回调的dispatch（不推荐） #

原生useReducer的dispatch没有回调接口，如果你一定要用回调，可以通过useRef和useEffect封装一个，但这种方式会增加代码复杂度，且不符合React单向数据流的设计理念，仅作为备选：

// 在提供Context的组件中
const [days, dispatch] = useReducer(daysReducer, initialDays);
const callbackRef = useRef<(() => void) | null>(null);

const dispatchWithCallback = (action: Action, callback: () => void) => {
    callbackRef.current = callback;
    dispatch(action);
};

// 监听days变化，执行回调
useEffect(() => {
    if (callbackRef.current) {
        callbackRef.current();
        callbackRef.current = null;
    }
}, [days]);

// 将dispatchWithCallback放入Context

然后在useDays中使用这个封装后的dispatch：

getDayByDate: (date: Date, callback?: () => void) => {
    let day = days.find(day => day.date.toDateString() === date.toDateString());
    if (!day) {
        day = { date, note: null };
        dispatchWithCallback({ type: 'create', data: day }, callback);
    }
    return day;
}

总结 #

• 优先用方案1，简单直接，符合业务逻辑，调用方无需额外处理。
• 绝对不要用setTimeout，这是不可靠的hack，会导致潜在的时序bug。
• 如果必须等待状态更新完成后执行操作，再用方案2。

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