在react项目中，唤起打印功能，出现数据异步问题导致打印的数据是上一次的数据内容。

在react项目中，我的需求是：在网页中唤起打印功能，打印报告单。

出现的问题是： 使用useState更新数据，数据存在异步问题，数据迟迟没有更新渲染，导致我唤起打印功能还是上次的数据模版。（有个迷惑行为就是：再唤起打印功能的时候，引入的模版肉眼可见的数据更新且渲染了，但是打印预览上面的数据确实空白，或者是上一次的数据模版）。

或者是说reportRef没有内容

import React, { useEffect, useState } from 'react';
import { Table, Button, Space, message} from 'antd';
import { useReactToPrint } from "react-to-print";
import { InspectReport} from '封装的组件库';


const testTable = () => {
  const [dataList, setDataList] = useState([]);
  const [dataDetail, setDataDetail] = useState([]);
  const reportRef = React.createRef();

  // 解决数据异步问题
  useEffect(() => {
    // 正常数据异步用useEffect就可以解决，但是我的实际情况是还是打印的上一次的数据
    // 所以这里我用了useEffect + setTimeout 完美解决了我数据异步导致打印还是上次数据的问题
    if(dataDetail?.data && dataDetail?.data.length) { // 数据判空处理
      setTimeout(()=> {
        handlePrint?.();
      },1000)
    }
  }, [dataDetail]);

  const getDataDetait = () => {
    let res = 数据请求返回的结果;
    return res;
  }

  // 打印功能
  const handlePrint = useReactToPrint({
    content: () => reportRef.current,
    pageStyle: "@page { size: A4 !important;  margin: 5mm !important;}",
    removeAfterPrint: true,
    documentTitle: `报告名称`,
    onAfterPrint: () => {
      message.success({ content: "开始打印!",duration: 2 });
    },
    onPrintError: () => {
      message.error({ content: "打印失败!",duration: 2 });
    },
  });

  const columns = [
    ...(其他列表项),
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '操作',
      width: 100,
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="link"
            onClick={async() => {
              let formData = {
                ...(参数),
              }

              let res = await getDataDetail(formData)
              setDataDetail(res);
            }}
          >打印</Button>
        </Space>
      ),
    },
  ];

  // 表格
  <Table
    rowKey="id"
    dataSource={dataList}
    columns={columns}
  />

  // 引入的打印内容的组件（打印组件不要放在表格里）
  <div style={{
    position: 'relative',
    width: '100%',
    // display: 'none',
  }}>
    <InspectReport data={dataDetail} ref={reportRef} />  // 打印内容的模版组件
  </div>

};