为什么带有useState钩子的setInterval无法正确更新状态

Question

我试图理解钩子在React中的工作方式。我有一些关于counter的例子，但是不明白为什么日志看起来像那样。第一个console.log是5-因为setState是一个异步函数。但是接下来的结果很奇怪。为什么“ setInterval中的状态”始终为5，而“状态”两次为6？

我准备了一些例子：

function Counter() {
  const [state, setState] = React.useState(5);
  React.useEffect(() => {
    setInterval(() => {
      setState(state + 1);
      console.log('state in setInterval', state);
    }, 5000);
  }, []);

  console.log('state', state);
  return (
    <React.Fragment>
      <h2>Counter: {state}</h2>
    </React.Fragment>
  );
}
ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

（也on CodePen）