javascript - 使用 React Hooks 响应 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：无法读取 null 的属性“getBoundingClientRect”。10 | 常量 setPdfSize = () => { 11 | setInitialWidth(pdfWrapper.current.getBoundingClientRect().width); | ^ 12 | }; 13 | 14 | useEffect(() => { 任何帮助将不胜感激。

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));
  };
}, []);