ReactToPrint：-TypeError：无法读取未定义的属性'名称'

Question

请帮助。我正在做电子反应打印发票的应用程序。我正在使用反应打印。但是我遇到了错误TypeError：无法读取未定义的属性'名称'

这是我的代码

import ReactToPrint from "react-to-print";


export class ConfirmScreen extends Component {
  render() {
    const {
      values: { name, amount, address, date }
    } = this.props;
    return (
      <div class="container">
        <p id="reciept-no">Receipt No. 1001190614-69</p>
        <p id="date">Date : 14-Jun-2019</p>
        <p id="name">RECIEVED With thanks from {name}</p>
        <p id="address">Addeess: {address}</p>
        <p id="amountInWords">The sum of Rupees Five Hundred Thirty only</p>
        <p id="paymentMode">by cash</p>
        <p id="moto">
          as a Specific Donation to the Corpus of the Trust / Donation /
        </p>
        <p id="amount">₹ {amount}</p>
        <p id="subject">Receipt is issued subject to realization.</p>
        <p id="accountant">Accountant</p>

      [enter image description here][1]
      </div>
    );
  }
}

const Example = () => {
  const componentRef = useRef();
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>print</button>}
        content={() => componentRef.current}
        copyStyles={() => true}
      />
      <ConfirmScreen ref={componentRef} />
    </div>
  );
};

export default Example;

Answer 1

Hi Vishal，您正在破坏道具，但没有将任何道具传递给ConfirmScreen组件，这就是为什么值变得不确定的原因。所以请使用下面的代码来解决您的问题

 const {
      values: { name, amount, address, date }={}
    } = this.props;

我也在codeandbox上做了代码，请检查您的参考书

https://codesandbox.io/s/example-react-hooks-useref-ojj3l