学习React，制作一个非常简单的待办事项列表。我能够按预期添加项目。当我输入一些东西并点击“添加”，项目就会显示在页面上。但我注意到，如果我尝试console.log结果，得到安慰的数组总是缺少最后一个项目。例如，如果我输入“面包”并点击“添加”，它会显示在页面上，但在控制台中，我只得到了一个空数组。如果我输入“milk”并单击“add”，在页面上会同时显示bread和milk，但在控制台中，我只看到[“bread”]作为数组。为什么会发生这种情况？

import { useRef, useState } from "react";

export default function App() {
  const [items, setItems] = useState([]);
  const inputRef = useRef();

  function onSubmit(e) {
    e.preventDefault();
    const value = inputRef.current.value;
    setItems(prev => [...prev, value]);
    console.log(items);
    inputRef.current.value = "";
  }

  return (
    <main>
      <form onSubmit={onSubmit}>
        <input type="text" ref={inputRef} />
        <button type="submit">Add</button>
      </form>
      <h3>My List:</h3>
      <ul>
        {items.map(item => (
          <li>{item}</li>
        ))}
      </ul>
    </main>
  );
}