为什么函数内部的状态变量保持其原始值？

Question

我正在用NextJS编写。我有一个仅将状态记录到控制台的功能（尝试删除尽可能多的变量来解决此问题）。我有一个将clickAction从其原始值addTarget更改为measureDistance的按钮。然后，当我单击子组件Map时，它将触发onMapClick运行。

onMapClick将clickAction记录为旧值addTarget。为什么？

这是按下按钮将clickAction更改为measureDistance然后单击子组件的结果。

  const [pointOfInterest, setPointOfInterest] = useState<Coordinate | undefined>(undefined);
  const [clickAction, setClickAction] = useState<ClickActions>('addTarget');

  function changeClickAction(action: ClickActions) {
    console.log('Changing click action to: ', action);
    setClickAction(action);
  }

  console.log('clickAction outside the function: ', clickAction);

  function onMapClick(coordinate: Coordinate) {
    setPointOfInterest(coordinate);
    console.log('clickAction inside the function: ', clickAction);
  }

     
  return <>
    <Map onMapClick={onMapClick}/>
    <ClickActionsButtons onUpdate={changeClickAction} selected={clickAction} />
  </>

控制台在下面

第一次渲染：

clickAction函数外部：addTarget

点击更改clickAction：

将点击操作更改为：measureDistance

clickAction函数外部：measureDistance

在子组件Map上单击两次

clickAction函数外部：measureDistance

函数内部的

clickAction：addTarget

clickAction函数外部：measureDistance

函数内部的

clickAction：addTarget

我也测试了这个只是递增数字，它总是显示原始值。我试图在CodeSandbox中重现此内容，但是我做不到。