React开发NoteEditor添加笔记时字符串数组返回undefined问题

你遇到的arrayOfStrings为undefined问题，核心是两个React基础逻辑错误，按以下顺序排查即可定位：

1. 检查事件回调返回值的接收逻辑：React的合成事件回调（比如onChange绑定的函数）返回值不会被框架做任何处理，你在onDescriptionChange里return的数组没有任何变量/状态接收，函数执行完就被销毁了，后续逻辑自然拿不到这个值。
2. 检查状态更新时序：setNote是异步批处理逻辑，调用后立刻执行addNote()时，组件内的note状态还没完成更新，就算数组传对了，提交时也会读到旧的状态值。
3. 辅助验证点：在onDescriptionChange内打印arrayOfStrings，如果能正常输出分割后的数组，就可以排除split方法本身、textarea取值错误的问题。

不要依赖事件回调return传值，把输入值存在组件状态中，提交时直接用最新值处理，彻底避开异步状态坑：

1. 新增状态存储textarea的原始输入值，修改onChange逻辑，只做高度调整和输入值存储：

// 组件内新增状态，存描述输入框的原始值
const [descInput, setDescInput] = useState('');

const onDescriptionChange = (e) => {
  setTextAreaHeight(e, '100px');
  setDescInput(e.target.value);
};

2. 修改提交逻辑，提交动作触发时再做字符串分割，直接用最新值组装note对象，同时把组装好的新note直接传给提交方法，避免读旧状态：

const addArrayToNote = () => {
  // 分割时加一层过滤，去掉连续空格、首尾空格产生的空字符串
  const arrayOfStrings = descInput.split(' ').filter(str => str.trim().length > 0);
  const updatedNote = {
    ...note,
    description: arrayOfStrings
  };
  setNote(updatedNote);
  // 注意：修改你的addNote方法，支持传入note参数，直接用传入的updatedNote提交即可
  addNote(updatedNote);
};

额外注意：检查textarea的绑定写法，正确写法是onChange={onDescriptionChange}，不要加括号写成onChange={onDescriptionChange()}，后者会在组件渲染时直接执行函数，导致取值异常；如果有两个textarea，确认描述输入框的onChange没有绑错到其他文本域上。

如果你需要输入时实时拿到分割后的数组做其他逻辑（比如实时预览、关键词统计），也可以直接把分割后的数组存在独立状态里，onChange触发时直接更新数组状态即可，不需要等提交时再处理。

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