javascript - 如何从 useEffect 访问组件的当前状态而不使其成为依赖项？

Question

我有以下组件(简化的)，给定注释 ID，它将加载并显示它。它将在 useEffect 中加载注释，并且当加载不同的注释或卸载组件时，它会保存该注释。

const NoteViewer = (props) => {
    const [note, setNote] = useState({ title: '', hasChanged: false });

    useEffect(() => {
        const note = loadNote(props.noteId);
        setNote(note);

        return () => {
            if (note.hasChanged) saveNote(note); // bug!!
        }
    }, [props.noteId]);

    const onNoteChange = (event) => {
        setNote({ ...note, title: event.target.value, hasChanged: true });
    }

    return (
        <input value={note.title} onChange={onNoteChange}/>
    );
}

问题是，在 useEffect 中，我使用 note，它不是依赖项的一部分，因此这意味着我总是得到过时的数据。

但是，如果我将注释放在依赖项中，那么每当修改注释时就会执行加载和保存代码，这不是我需要的。

所以我想知道如何访问当前注释而不使其成为依赖项？我尝试用引用替换注释，但这意味着当注释更改时组件不再更新，而且我不想使用引用。

知道实现这一目标的最佳方法是什么吗？也许有一些特殊的 React Hooks 模式？

Answer 1

您无法获取当前状态，因为该组件不会在删除它的应用渲染上渲染。这意味着您的效果上次不会运行。

使用效果清理函数对于此类事情来说并不是一个好地方。这确实应该保留用于清理该效果，而不是其他任何东西。

相反，应用程序中更改状态以关闭 NoteViewer 的任何逻辑也应该保存笔记。因此，在某些父组件(可能是 NoteList 或其他组件)中，您可以保存并关闭，如下所示:

function NoteList() {
  const [viewingNoteId, setViewingNoteId] = useState(null)

  // other stuff...

  function closeNote() {
    if (note.hasChanged) saveNote(note)
    setViewingNoteId(null)
  }

  return <>{/* ... */}</>
}