无法使用react-pdf和react-js下载PDF

Question

在过去的几个小时里，我一直在修复与react-pdf包相关的问题。我已经尝试了网上可用的各种例子。但是我正面临着同样的错误信息。

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of PDFContainer.

PDF容器文件

import React from 'react';
import { Document, PDFDownloadLink } from 'react-pdf';
import { connect } from 'react-redux';
import exportPDF from 'Components/ExportAnswersPdf';
import { fetchQuestionnaireResults } from 'Actions/QuestionnaireResultsAction';
import ServiceFactory from '../service-factory';

export class PDFContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      export: null,
    };
  }

  handleApprove = (Params) => {
    ServiceFactory.exportAnswers(
      Params
    ).then((response) => {
      this.handleCloseModal();
      this.setState({
        export: response,
      });
    });
  }

  render() {
    return (
      <div>
        { this.state.export !== null ? (
          <div className='document'>
            <PDFDownloadLink
              document={(
                <Document>
                  <exportPDF />
                </Document>
                )}
              fileName='answers.pdf'
            >
              {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
            </PDFDownloadLink>
          </div>
        ) : null }
      </div>
    );
  }
}


export default PDFContainer;

导出PDF页面功能

import React from 'react';
import { Page, Text, View } from 'react-pdf';

const exportPDF = () => {
  return (
    <Page>
      <View>
        <Text>Section #1</Text>
      </View>
    </Page>
  );
};

export default exportPDF;

在尝试填充任何数据之前，我想我应该测试一下只下载PDF并稍后用状态值填充数据的基本实现。在这里，任何帮助都是非常感谢的。

Answer 1

您可能没有注意到，您在第8和51行导出了组件PDFContainer。尝试删除其中一个导出。注意错误文本。