在 React Native 中创建 PDF 时无法调用函数？

Question

我正在使用 react-native-html-to-pdf 创建一个 pdf 文件，它工作正常

但在我的例子中，我有一个数组，我想迭代它们以将其附加到 HTML、

所以我创建了一个函数来迭代项目和 returns HTML 标签当我记录这些项目时我可以在我的控制台日志中看到它但是当我打开生成的 PDF 文件时，我只看到未定义！虽然记录得很好

state =  {
     toolsUsed: [
      {
        name: 'N-1',
        price: 10,
        count: 3,
        id: Math.floor(Math.random() * 150).toString(),
      },
      {
        name: 'N-2',
        price: 5,
        count: 3,
        id: Math.floor(Math.random() * 150).toString(),
      },
      {
        name: 'N-3',
        price: 10,
        count: 7,
        id: Math.floor(Math.random() * 150).toString(),
      },
    ],
}

函数

printTool = () => {
    this.state.toolsUsed.map(({name, price, count, id}) => {
      console.log('name', name); // it log successful
      console.log('price', price);// it log successful
      console.log('count', count);// it log successful
      return (
        <>
          <p key={id} style="text-align:right;padding:10px;">
            name: ${name}
          </p>
          <p key={id} style="text-align:right;padding:10px">
            count: ${count}
          </p>
          <p key={id} style="text-align:right;padding:10px">
            price: ${price}
          </p>
        </>
      );
    });
  };

创建 PDF 文件

  async createPDF() {
     let options = {
      //Content to print in PDF file
      html: `<h1 style="text-align: center;">
               Bill
             </h1>
            <div>
              ${this.printTool()} // I got undefined in PDF
            </div>`,

      fileName: `Bill${Math.floor(Math.random() * 100)}`,
      directory: 'Downloads',
    };

   let file = await RNHTMLtoPDF.convert(options);
   this.setState({filePath: file.filePath}, () => alert(this.state.filePath));
  }

Answer 1

将 return 语句添加到 printTool()

printTool = () => {
return this.state.toolsUsed.map(({name, price, count, id}) => {
  console.log('name', name); // it log successful
  console.log('price', price);// it log successful
  console.log('count', count);// it log successful
  return (
     '<p><p key={id} style="text-align:right;padding:10px;">name: '+name+'</p><p key={id} style="text-align:right;padding:10px">count: '+count+'</p><p key={id} style="text-align:right;padding:10px">price: '+price+'</p></p>'
  );
});
};

如果您尝试记录函数 console.log(JSON.stringify(this.printTool())) JSON 看起来像 json

然后根据您的pdf视图进行更改

在 React Native 中创建 PDF 时无法调用函数？

could not call function when create PDF in react native?

javascript

react-native

react-native-android

react-native-ios