PDFMake 无法与异步 React + 本地存储正常工作

Question

我正在使用 PDFMake 生成包含不同数据的 PDF。我有一张表，里面有不同的人，每个人都有自己的用户数据。对于表格中的每个人，都有一个“生成 PDF”按钮，可使用该人的数据创建 PDF。

当 Generate PDF 按钮被触发时，我使用 React Context API 和 dispatch 函数将数据写入上下文存储，同时写入本地存储。 PDFMake 从本地存储获取数据，以生成 PDF。 下面的代码显示了这一点：

 const createPDF = async (contractID) => {
    let PDFDATA = ['Person One', 'Name: John Doe', 'Age: 30']

    await dispatch({
      type: "SET_PDF_DATA_REVISION",
      payload: PDFDATA,
    })

    pdfMake.createPdf(PDF_Doc).download("PersonData_PDF")
    }

//生成PDF按钮函数调用

<Button variant="warning" onClick={() => createPDF(record.ID)}>
{"Generate PDF"}
</Button>

但是，当我单击按钮生成 PDF 时，会显示错误的数据，来自我单击的前一个人。即使我可以在本地存储中看到正确的数据。如果我刷新页面，此错误将得到修复，并且 PDF 将使用正确的数据创建。 我想知道出了什么问题，以及如何在不刷新页面的情况下做到这一点。 问题可能出在执行顺序上，即 async/await 和 createPDF 函数不能很好地协同工作吗？

提前致谢。