React待办列表组件渲染异常及saveNote后notes为空问题咨询

核心问题原因：console.log(notes)为空的原因 #

React的状态更新是异步操作，调用setNotes后，组件不会立即重新渲染，状态也不会同步更新。你在saveNote里调用setNotes后马上打印notes，拿到的是当前渲染周期的旧状态值，所以显示为空。

如果要查看更新后的notes，可以通过两种方式：

• 使用useEffect监听notes的变化，当状态更新时自动打印
• 在组件渲染的JSX区域（比如添加调试打印）查看新状态

其他需要修正的潜在问题 #

1. 重置note状态错误：你用setNote("")把note从对象改成了字符串，会导致后续输入框的value={note.content}报错（字符串没有content属性），应该重置为初始的对象形式：setNote({id: "", content: ""})。
2. ID生成逻辑有隐患：用notes.length +1生成ID，后续如果实现删除功能，删除笔记后数组长度变化，会导致新生成的ID和已有的重复，建议用时间戳或其他方式生成唯一ID。

修正后的完整代码 #

function App() {
  const [note, setNote] = React.useState({
    id: "",
    content: ""
  });

  const [notes, setNotes] = React.useState([]);

  function createNote(event) {
    // 用时间戳生成唯一ID，避免重复
    setNote({
      id: Date.now(),
      content: event.target.value
    });
  }

  function saveNote() {
    console.log("当前要添加的note:", note);
    setNotes((prevNotes) => [...prevNotes, note]);
    // 重置为初始对象，避免输入框报错
    setNote({id: "", content: ""});
    // 这里打印的是旧状态，不要依赖这个值判断更新结果
    console.log("当前旧的notes:", notes);
  }

  // 监听notes状态变化，打印更新后的值
  React.useEffect(() => {
    console.log("更新后的notes:", notes);
  }, [notes]);

  function addNote(note) {
    return (
      <li key={note.id}>
        <span>{note.content}</span>
      </li>
    );
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <div className="form">
        <input onChange={createNote} value={note.content} type="text" />
        <button onClick={saveNote} type="submit">
          <span>Add</span>
        </button>
      </div>
      <div>
        <ul>
          <li>A Item</li>
          {notes.map(addNote)}
        </ul>
      </div>
    </div>
  );
}
ReactDOM.createRoot(document.body).render(<App />);

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