Javascript 为什么功能组件状态不保留状态值？

在以下React功能组件中，存在本地emailAttachments状态。最初它是一个空数组。有一个事件处理程序接受要附加到emailAttachments数组的EmailAttachment实例

interface EmailAttachemnt {
  emailAttachmentID: number;
  fileName: string;
}

const MemberEmailForm: React.FC<MemberEmailProps> = (props) => {

  const [emailAttachments, setEmailAttachments] = React.useState<Array<EmailAttachment>>([]);
    
  const handleAttachmentAdded = (attachment: EmailAttachment) => {
    const a = [...emailAttachments];
    setEmailAttachments([...a, ...[attachment]]);
  }

}

那么这个办法,

setEmailAttachments([...emailAttachments, attachment);

然后，经过一些研究，这种方法首先复制原始数组

const a = [...emailAttachments];
setEmailAttachments([...a, ...[attachment]]);

但是，在这两种方法中，行为是相同的，当处理程序执行时，emailAttachments数组始终为空

---

是否有一种更合适的方法会导致附加后续实例并包含所有实例的数组？

听起来像是在循环中排队等待状态更新。由于组件状态为const，并且在渲染周期内将一组状态更新排队，因此应使用功能状态更新从上一个状态更新状态，而不是从上一个渲染周期更新状态

---

这解决了问题，并将为其他情况提供有用的知识。

setEmailAttachments([...emailAttachments, attachment);

const a = [...emailAttachments];
setEmailAttachments([...a, ...[attachment]]);

setEmailAttachments(emailAttachments => [
  ...emailAttachments,
  ...[attachment],
]);