如何让useReactToPrint获取最新状态？销售发票打印值更新异常求助

核心原因 #

1. 子组件未转发Ref：printSellingInvoice作为自定义组件，未通过forwardRef将外部ref转发到内部DOM节点，导致父组件的invoiceRef无法捕获到子组件更新后的DOM。
2. 打印函数未关联状态依赖：若handlePrint在组件初始化时创建且未绑定状态依赖，可能在状态更新后无法及时响应最新的DOM快照。

具体修复步骤 #

1. 给子组件添加Ref转发 #

修改printSellingInvoice组件，用forwardRef包裹，将外部传入的ref绑定到内部的发票容器：

import { forwardRef, useIntl } from 'react';

// 用forwardRef接收props和ref参数
const PrintSellingInvoice = forwardRef<HTMLDivElement, ISellingInvoiceRequest>((props, ref) => {
  const intl = useIntl();

  return (
    // 将ref绑定到根容器上
    <div className="invoice" ref={ref}>
      {/* 所有动态内容直接使用props中的最新值 */}
      <div>售价：{props.price}</div>
      {/* 其他发票元素... */}
    </div>
  );
});

// 给组件设置显示名称（可选，方便调试）
PrintSellingInvoice.displayName = 'PrintSellingInvoice';

2. 父组件中更新打印函数逻辑 #

用useCallback包裹打印函数，将所有影响发票内容的状态加入依赖项，确保状态更新时重新生成打印逻辑：

import { useRef, useCallback, useState } from 'react';
import useReactToPrint from 'react-to-print';

const ParentComponent = () => {
  const invoiceRef = useRef<HTMLDivElement>(null);
  // 示例：售价状态
  const [price, setPrice] = useState('');

  // 绑定状态依赖，确保状态更新时打印函数能获取最新DOM
  const handlePrint = useCallback(() => {
    const printTrigger = useReactToPrint({
      content: () => invoiceRef.current,
      removeAfterPrint: true,
    });
    printTrigger();
  }, [price]); // 添加所有影响发票内容的状态（如price、数量等）

  return (
    <div>
      {/* 售价输入框 */}
      <input
        type="text"
        value={price}
        onChange={(e) => setPrice(e.target.value)}
        placeholder="输入售价"
      />
      {/* 打印按钮 */}
      <button onClick={handlePrint}>打印发票</button>
      {/* 渲染发票组件并传递ref和状态 */}
      <PrintSellingInvoice ref={invoiceRef} price={price} />
    </div>
  );
};

3. 额外验证点 #

• 确保printSellingInvoice内的所有动态内容都直接使用父组件传递的props，避免使用未同步的内部状态。
• 若涉及异步数据（如接口获取的订单信息），需确保数据加载完成后再触发打印，可通过状态判断或useEffect监听数据状态实现。

内容的提问来源于stack exchange，提问作者Isra_Yas