如何从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 <>{/* ... */}</>
}