Javascript 我应该使用Redux存储将数据从子级传递到父级吗？

我正在使用React钩子和Typescript构建一个待办事项/笔记应用程序，以学习Redux的基础知识

注释由ID和值组成。用户可以添加、删除或编辑注释

添加/删除机制工作正常。但是编辑一个对我来说更棘手，因为我在质疑它应该如何实现

我想我的减速器代码很好。问题在于我的组件（Note.tsx）和它的父组件（App.tsx）之间

当我记录值时，我可以看到注释的新更新/编辑值没有发送到减速器。因此，“我的笔记”不会使用新值进行编辑

我尝试过“克隆”redux商店，并在这里进行更改，但对我来说，这似乎既乏味又不自然。我应该从Note.tsx组件调用edit方法吗

有没有一种干净/传统的方法可以做到这一点

这是我的密码：

App.tsx

function App() {
  const notes = useSelector<NotesStates, NotesStates['notes']>(((state) => state.notes));

  const dispatch = useDispatch();

  const onAddNote = (note: string) => {
    dispatch(addNote(note));
  };

  const onDeleteNote = (note: NoteType) => {
    dispatch(deleteNote(note));
  };

  const onEditNote = (note: NoteType) => {
    dispatch(updateNote(note));
  };

  return (
    <div className="home">
      <NewNoteInput addNote={onAddNote} />
      <hr />
      <ul className="notes">
        {notes.map((note) => (
          <Note
            updateNote={() => onEditNote(note)}
            deleteNote={() => onDeleteNote(note)}
            note={note}
          />
        ))}
      </ul>
    </div>
  );
}

---

感谢@secan在我的评论中做出的这项工作，以及一些更改

在App.tsx中：

      <Note
        updateNote={onEditNote}
        deleteNote={() => onDeleteNote(note)}
        note={note}
      />

ondelettenote（note）}
注意={note}
/>

在Note.tsx中：

interface NoteProps {
    deleteNote(): void
    updateNote(newNote: NoteType): void // updated the signature
    note: NoteType
}

// Now passing entire object instead of just the value
    const onUpdateNote = (newNote: NoteType) => {
        updateNote(newNote);
        setIsEditing(false);
      };

const renderBody = () => {
    if (!isEditing) {
      return (
        <>
          {!value && <span className="empty-text">Note is empty</span>}
          <span>{value}</span>
        </>
      );
    }
    return (
      <input
        value={newNoteValue}
        onChange={(e) => setNewNoteValue(e.target.value)}
        // modifying current note with updated value
        onBlur={() => onUpdateNote({ id, value: newNoteValue })}
      />
    );
  };

interface NoteProps{
deleteNote（）：void
updateNote（newNote:NoteType）：void//更新了签名
注：NoteType
}
//现在传递整个对象，而不仅仅是值
const onUpdateNote=（newNote:NoteType）=>{
更新日期（newNote）；
设置编辑（假）；
};
常量renderBody=（）=>{
如果（！i编辑）{
返回(
{！值&&注释为空}
{value}
);
}
返回(
setNewNoteValue（e.target.value）}
//使用更新的值修改当前注释
onBlur={（）=>onUpdateNote（{id，value:newNoteValue}）}
/>
);
};

在App.tsx中有

updateNote={（）=>onEditNote（note）}

执行函数

onEditNote

将当前note作为参数传递。您应该改为使用

updateNote={onEditNote}

，并且在Note.tsx中，您应该将

onBlur={onUpdateNote}

替换为

onBlur={（）=>onUpdateNote（）}

      <Note
        updateNote={onEditNote}
        deleteNote={() => onDeleteNote(note)}
        note={note}
      />

interface NoteProps {
    deleteNote(): void
    updateNote(newNote: NoteType): void // updated the signature
    note: NoteType
}

// Now passing entire object instead of just the value
    const onUpdateNote = (newNote: NoteType) => {
        updateNote(newNote);
        setIsEditing(false);
      };

const renderBody = () => {
    if (!isEditing) {
      return (
        <>
          {!value && <span className="empty-text">Note is empty</span>}
          <span>{value}</span>
        </>
      );
    }
    return (
      <input
        value={newNoteValue}
        onChange={(e) => setNewNoteValue(e.target.value)}
        // modifying current note with updated value
        onBlur={() => onUpdateNote({ id, value: newNoteValue })}
      />
    );
  };