useContext state 值沒有改變

Question

我在useEffect中更改了setEvents和setNextStartHo的值，並在console.log中打印出來，但是顯示的是初始值。

我創建了一個名為 EventTimeContext 的上下文。 我想更改其他組件中的 nextStartHour 和事件值。

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>
  );
}

在 useEffect 中，我用事件和 setNextStartHo 更改了值 function，但是如果我看一下 console.log，它具有初始值。

// index.ts
const { nextStartHour, event, setEvents, setNextStartHo } = useContext(EventTimeContext);


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

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

我應該如何解決這個問題？

Answer 1

問題是你有console.log(nextStartHour); // 24 console.log(nextStartHour); // 24僅在 index.js 文件的主體中調用，因此當您執行控制台日志時獲得的值來自useEffect引起的重新渲染之前。 您的值應該更改，但從主體中的console.log不清楚。

如果你想看到這個，一個好的方法是擁有一個帶有這個渲染的組件：

render(
 <>
  {nextStartHour} // this will show your 10 value if your useEffect code is in this comp.
 </>
)

請記住，react 與直接的 JS/TS 文件不同。 一切都與渲染有關。 如果你想要一個更具體的例子，我們將需要更多的代碼——但這是錯誤的。