使用responsiveness响应pdf响应，但是当增加或减小窗口大小时，我得到了这个TypeError

Question

import React, { useState, useRef, useEffect } from 'react';
import throttle from 'lodash/throttle';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

export default function PDFWrapper({ data, onDocumentLoadSuccess, pageNumber }) {
  const [initialWidth, setInitialWidth] = useState(null);
  const pdfWrapper = useRef();

  const setPdfSize = () => {
    setInitialWidth(pdfWrapper.current.getBoundingClientRect().width);
  };

  useEffect(() => {
    window.addEventListener('resize', throttle(setPdfSize, 3000));
    setPdfSize();
    return () => {
      window.removeEventListener('resize', throttle(setPdfSize, 3000));
    };
  });

  return (
    <div
      id="row"
      style={{
        height: '100vh', display: 'flex',
      }}
    >
      <div id="placeholderWrapper" style={{ height: '100vh' }} />
      <div id="pdfWrapper" style={{ width: '90vw' }} ref={pdfWrapper}>
        <Document
          file={data}
          onLoadSuccess={onDocumentLoadSuccess}
          noData=""
          loading=""
        >
          <Page pageNumber={pageNumber} loading="" width={initialWidth} />
        </Document>
      </div>
    </div>
  );
}

我会在这里复制整个错误。它看起来像是来自setPdfSize函数。注意：

TypeError:无法读取属性'getBoundingClientRect‘的null。10 _(_(_

Answer 1

首先，我会将[]一个空依赖数组添加到useEffect钩子中，以便只在组件挂载后运行，您可能不想多次附加和分离相同的事件。另外，我将在null函数中检查setPdfSize值，因为它最初是null。

请参阅useRef文档：

useRef返回一个可变的ref对象，该对象的.current属性初始化为传递的参数(initialValue)。返回的对象将持续到组件的整个生存期。

我将努力做到以下几点：

const pdfWrapper = useRef(null);

const setPdfSize = () => {
  if (pdfWrapper && pdfWrapper.current) {
    setInitialWidth(pdfWrapper.current.getBoundingClientRect().width);
  }
};

useEffect(() => {
  window.addEventListener('resize', throttle(setPdfSize, 3000));
  setPdfSize();
  return () => {
    window.removeEventListener('resize', throttle(setPdfSize, 3000));
  };
}, []);