React多useState调用引发笔记应用textarea属性undefined问题排查

首先明确：你的textarea对应的noteText状态本身并没有问题——从代码看，onChange正确绑定了setNoteText，value也和noteText做了双向绑定，所以noteText不会是undefined。真正的问题出在保存逻辑的参数传递方式上！

核心错误点 #

你在handleSaveClick里连续两次调用handleAddNote：

handleAddNote(noteText);
setNoteText('');
handleAddNote(noteTitle);
setNoteTitle('');

这相当于把笔记的文本和标题当成两个独立的笔记传给父组件，而父组件的handleAddNote应该是期望接收一个包含标题和文本的完整笔记对象，不是分开传两次。这就导致父组件要么只处理了最后一次传入的标题，要么完全无法识别数据结构，最终让你误以为textarea的返回值是undefined。

修复步骤 #

1. 修改handleSaveClick的逻辑，把标题和文本打包成一个对象传递：

const handleSaveClick = () => {
  if (noteText.trim().length > 0 && noteTitle.trim().length > 0) {
    // 传递包含标题和文本的完整笔记对象
    handleAddNote({ title: noteTitle, text: noteText });
    // 清空两个输入框的状态
    setNoteText('');
    setNoteTitle('');
  }
};

2. 同步父组件的handleAddNote逻辑，确保它能接收并处理这个对象参数（比如在NoteList或Home组件中）：

// 示例父组件中的handleAddNote实现
const handleAddNote = (newNote) => {
  // newNote包含title和text两个属性，可按需添加id等其他字段
  setNotes(prevNotes => [...prevNotes, { ...newNote, id: Date.now() }]);
};

关于你尝试过的方法 #

你提到的闭包问题、合并状态、React DevTools追踪，其实都没触碰到核心矛盾——这个问题和useState批处理也没关系（React在合成事件中会自动批处理setState更新，但这不会导致state值丢失）。你不需要用useReducer，只要修正数据传递的结构就能解决问题。

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