反应状态滞后于现实，导致MUI显示错误的对话框

Question

在按钮上，我有一个onClick处理程序

const handleSelectOpen = (noteId) => {
let newState = {notes: state.notes, noteDetailScreen: true, activeNote: noteId, newNoteScreen: false, newNoteText: "", newNoteRelated: []};
setState(newState);
};

它做了两件重要的事情，它将状态中的noteDetailScreen设置为true，从而显示MUI对话框。它还将activeNote设置为noteId，这是应该在对话框中显示的内容。

然后，该内容在对话框中显示为｛state.notes[state.activeNote].content｝。问题是大多数时候，它显示了错误的内容！noteId总是正确的，但状态并不总是正确的。如何解决此问题>

Answer 1

在基于上一个状态更新状态时，应该向setState传递一个updater函数。它获取挂起状态并从中计算下一个状态

setState(prev => ({notes: prev.notes, noteDetailScreen: true, activeNote: noteId, newNoteScreen: false, newNoteText: "", newNoteRelated: []}))