Блог

Главная - Вопросы по программированию - Перехват реакции: используется в методе рендеринга (ошибка: недопустимый вызов перехвата)

Перехват реакции: используется в методе рендеринга (ошибка: недопустимый вызов перехвата)

#reactjs #react-hooks

#reactjs #реагирующие перехваты

Вопрос:

Я новичок в react, и я хочу создать веб-сайт, который мог бы отображать pdf.

Я загрузил средство просмотра PDF с помощью «npm install react-pdf» и на основе простого примера https://www.npmjs.com/package/react-pdf , я пишу следующий код.

 (import stuff)

class pdfViewer extends Component {
   pdfView = () => {
        const [numPages, setNumPages] = useState(null);
        const [pageNumber, setPageNumber] = useState(1);

        return (
            <div>
                <Document
                    file={eggPdf}
                    onLoadSuccess={({ numPages }) => {
                        setNumPages(numPages);
                    }}
                >
                    <Page pageNumber={pageNumber} />
                </Document>
                <p>Page {pageNumber} of {numPages}</p>
            </div>
        );
       }

  render(){
        const pdfViwer = this.pdfView();
        return(
        <div>
           {pdfViwer}
        </div>
        );

}

(export)

Отображается ошибка: Ошибка: недопустимый вызов перехвата. Перехваты могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин: …

Как я должен это изменить?

Заранее благодарю вас!

Комментарии:

1. Перехваты предназначены для функциональных компонентов, а не для классов. Если вы хотите использовать перехваты, преобразуйте класс в функцию или используйте состояние вместо перехвата.

Ответ №1:

Вы должны использовать компоненты функции или класса. Если вы хотите использовать перехваты, вам необходимо использовать функциональные компоненты следующим образом:

 (import stuff)

  const PdfView = () => {
        const [numPages, setNumPages] = useState(null);
        const [pageNumber, setPageNumber] = useState(1);

        return (
            <div>
                <Document
                    file={eggPdf}
                    onLoadSuccess={({ numPages }) => {
                        setNumPages(numPages);
                    }}
                >
                    <Page pageNumber={pageNumber} />
                </Document>
                <p>Page {pageNumber} of {numPages}</p>
            </div>
        );
       }

export default PdfView;

Теперь вы можете использовать этот компонент там, где хотите, в своем приложении.