React Hooks+Redux+TS笔记应用编辑功能与组件传值疑问

看起来你已经走对了大部分路，新增和删除都正常，编辑功能的问题核心是组件间的参数传递不匹配，以及绑定回调时的闭包陷阱导致旧值被传递。让我一步步帮你理清并修复这个问题。

问题根源分析 #

你当前的代码里存在两个关键问题：

1. 在App.tsx中给Note组件传递updateNote={() => onEditNote(note)}时，这里的note是循环时的原始对象，闭包会捕获这个旧值——无论你在Note里修改了什么新内容，最终传给reducer的还是原来的note对象，完全没带上新的value。
2. Note.tsx的updateNote props定义只接收string | number类型，但你的reducer需要的是包含id和新value的完整Note对象，参数类型不匹配导致无法正确传递更新信息。

解决方案一：修正Props传递（通过父组件回调） #

这种方式适合组件层级较浅的场景，保持props传递的清晰数据流：

1. 修正Note.tsx的Props类型 #

先把updateNote的参数改成正确的NoteType：

interface NoteProps {
  deleteNote(): void;
  updateNote(updatedNote: NoteType): void; // 改为接收完整的更新后笔记对象
  note: NoteType;
}

2. 修改Note.tsx中的更新逻辑 #

调用updateNote时，传递包含当前id和新value的对象：

const onUpdateNote = () => {
  // 把id和新的value打包成对象传递
  updateNote({ id, value: newNoteValue });
  setIsEditing(false);
};

3. 修正App.tsx中Note组件的回调绑定 #

让回调接收Note组件传回来的更新对象，而不是捕获旧的note：

<ul className="notes">
  {notes.map((note) => (
    <Note 
      key={note.id} {/* 别忘了加key！你之前把key写在li里了，应该移到组件这里 */}
      updateNote={(updatedNote) => onEditNote(updatedNote)} 
      deleteNote={() => onDeleteNote(note)} 
      note={note} 
    />
  ))}
</ul>

解决方案二：直接在Note.tsx中使用Redux（更简洁） #

其实你完全可以直接在Note组件里调用Redux的dispatch，不需要通过父组件传递回调，这样能减少props层级，代码更简洁，也完全符合Redux的使用规范：

修改Note.tsx代码 #

import { useDispatch } from 'react-redux';
// 导入你的updateNote action creator
import { updateNote } from './your-action-file';

interface NoteProps {
  deleteNote(): void;
  note: NoteType;
}

const Note: React.FC<NoteProps> = ({ deleteNote, note: { id, value } }) => {
  const dispatch = useDispatch(); // 直接获取dispatch
  const [isEditing, setIsEditing] = useState(false);
  const [newNoteValue, setNewNoteValue] = useState(value);

  const onDeleteNote = () => {
    deleteNote();
  };

  const onUpdateNote = () => {
    // 直接dispatch更新动作，传递id和新value
    dispatch(updateNote({ id, value: newNoteValue }));
    setIsEditing(false);
  };

  // ... 其余代码保持不变
};

然后在App.tsx里就不需要传递updateNote props了：

<Note 
  key={note.id}
  deleteNote={() => onDeleteNote(note)} 
  note={note} 
/>

额外注意点 #

• 确保你的updateNote action creator返回的action结构是正确的，比如：

  export const updateNote = (payload: NoteType) => ({
    type: 'UPDATE_NOTE',
    payload
  });
  

• 列表组件的key属性一定要加在<Note />组件上，而不是内部的<li>，这样React才能正确识别列表项的变化。

这两种方式都能完美解决你的问题，第二种方式更适合大多数场景，尤其是当组件层级变深时，能避免props drilling的麻烦。

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