React开发Google Keep克隆应用时笔记编辑值替换问题咨询

问题核心原因 #

• React 规定 props 为只读属性，直接在 Note 子组件内修改 props.title、props.content 是无效操作，笔记列表状态由 Container 父组件持有，必须由父组件执行更新逻辑。
• Note 组件内表单输入框的 name 属性和 currentNote 状态的字段名大小写不匹配，导致编辑的内容无法正确存入 currentNote。
• updateNote 方法逻辑错误，不需要在子组件内操作状态，只需将编辑后的内容传递给父组件的更新方法即可。

1. 修复 Container 组件 #

取消注释 handleUpdateNote 方法，调整为函数式更新避免闭包问题，同时给 Note 组件传递该方法：

export default function Container() {
  const [notes, setNotes] = useState([]);

  const addNote = (newNote) => {
    setNotes((prevNotes) => [...prevNotes, newNote]);
  };

  const deleteNote = (id) => {
    setNotes((prevNotes) => prevNotes.filter((note, index) => index !== id));
  };

  // 取消注释并修改更新逻辑
  const handleUpdateNote = (id, updatedNote) => {
    setNotes(prevNotes => {
      return prevNotes.map((note, index) => {
        return index === id ? {...note, ...updatedNote} : note;
      });
    });
  };

  return (
    <div>
      <CreateArea addNote={addNote} />
      {notes.map((note, index) => {
        return (
          <Note
            key={index}
            id={index}
            title={note.title}
            content={note.content}
            deleteNote={deleteNote}
            handleUpdateNote={handleUpdateNote} // 传递更新方法给子组件
          />
        );
      })}
    </div>
  );
}

2. 修复 Note 组件 #

统一表单 name 属性和状态字段名，修改 updateNote 方法调用父组件更新逻辑：

export default function Note(props) {
  const [editNote, setEditNote] = useState(false);
  const [currentNote, setCurrentNote] = useState({
    id: props.id,
    editTitle: props.title,
    editContent: props.content,
  });

  const handleDelete = () => {
    props.deleteNote(props.id);
  };

  const handleEdit = () => {
    setEditNote(true);
    // 打开编辑时同步最新的props内容，避免props更新后编辑框还是旧值
    setCurrentNote({
      id: props.id,
      editTitle: props.title,
      editContent: props.content,
    })
  };

  const handleInputEdit = (event) => {
    const { name, value } = event.target;
    setCurrentNote((prevValue) => ({
      ...prevValue,
      [name]: value,
    }));
  };

  const updateNote = () => {
    // 调用父组件更新方法，传递id和修改后的内容
    props.handleUpdateNote(currentNote.id, {
      title: currentNote.editTitle,
      content: currentNote.editContent
    })
    setEditNote(false);
  };

  return (
    <div>
      {editNote ? (
        <div className='note'>
          <input
            type='text'
            name='editTitle' // 修正name和state字段一致
            value={currentNote.editTitle} // 改为受控组件value，避免defaultValue不更新的问题
            onChange={handleInputEdit}
            className='edit-input'
          />
          <textarea
            name='editContent' // 修正name和state字段一致
            row='1'
            value={currentNote.editContent} // 改为受控组件value
            onChange={handleInputEdit}
            className='edit-input'
          />
          <button onClick={() => setEditNote(false)}>Cancel</button>
          <button onClick={updateNote}>Save</button>
        </div>
      ) : (
        <div className='note' onDoubleClick={handleEdit}>
          <h1>{props.title}</h1>
          <p>{props.content}</p>
          <button onClick={handleDelete}>DELETE</button>
        </div>
      )}
    </div>
  );
}

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