useContext状态值未更新：调用set方法后仍显示初始值

在useEffect中调用setEvents和setNextStartHo更新Context中的值，但组件内直接console.log输出的仍是初始值。相关代码如下：

Context定义代码 #

type Props = {
  children: React.ReactNode;
};

export const EventTimeContext = createContext<any>({ 
 nextStartHour: 24,
 event: false,
 setNextStartHo: (nextStartHour: number) => {},
 setEvents: (event: boolean) => {},
})

export const EventTimeContextProvider = ({ children }: Props) => {

  const [nextStartHour, setNextStartHour] = useState(24);
  const [event, setEvent] = useState<boolean>(false);

    const setEvents = useCallback(
    (event: boolean) => {
      setEvent(event);
    },
    [setEvent]
  );

    const setNextStartHo = useCallback(
    (hour: number) => {
      setNextStartHour(hour);
    },
    [setNextStartHour]
  );

return (
    <EventTimeContext.Provider
      value={{
        nextStartHour,
        event,
        setEvents: setEvents,
        setNextStartHo: setNextStartHo,
      }}
    >
      {children}
    </EventTimeContext.Provider>
  );
}

组件使用代码 #

const { nextStartHour, event, setEvents, setNextStartHo } = useContext(EventTimeContext);


useEffect(() => {
  setEvents(true);
  setNextStartHo(10); 
}, [])

console.log(nextStartHour); // 输出24
console.log(event); // 输出false

原因分析 #

React的setState是异步操作，组件顶层的console.log在首次渲染阶段执行，此时useEffect中的更新逻辑尚未触发，因此拿到的是初始状态值。即便更新逻辑触发，当前渲染周期内的状态变量也不会立刻改变，需等待下一次渲染完成后才会更新。

解决办法 #

1. 通过useEffect监听状态变化
   若要查看状态更新后的值，可新增一个useEffect监听目标状态变量，当变量变化时执行打印操作：

   useEffect(() => {
     console.log(nextStartHour); // 会打印更新后的值10
     console.log(event); // 会打印更新后的值true
   }, [nextStartHour, event])
   

2. 理解React渲染周期逻辑
   组件首次渲染时，顶层console.log输出初始值；useEffect在首次渲染完成后执行，触发状态更新，React会触发组件重新渲染，此时新的状态值会在渲染过程中生效。若保留顶层console.log，第二次渲染时会输出更新后的状态值。

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