在剑道反应中导出 pdf 仅导出地图中的最后一项

Question

我正在尝试将一些项目导出为 pdf，其中每个项目都有一个按钮，该按钮应将特定项目导出为 pdf。我也试过给每个孩子一把钥匙，但是没有用。

这是我的代码：

import './Logout.css';

import React, { useRef } from "react";

import { NavLink } from 'react-router-dom';

import { PDFExport } from '@progress/kendo-react-pdf';

const Logout = () => {

 const data = [

    { id: 1, name: 'Item 1', value: 100 },
    { id: 2, name: 'Item 2', value: 200 },
    { id: 3, name: 'Item 3', value: 300 },

  ];

const pdfExport = useRef(null);

  const exportPDF = () => {
    pdfExport.current.save();
  };

  return (
    <div className='logOutStyle'>
      <h1> you just loged out</h1>
      <h3> to sing in again click here</h3>


      {data.map((item, i) => (
      <div key={item.id}>
        <PDFExport key={item.id} ref={pdfExport} paperSize="A4" margin="2cm">
          <p key={data[i]}>{data[i].name}</p>
        </PDFExport>
        <button key={item.id} onClick={exportPDF}>Export PDF</button>
      </div>
    ))}

      <NavLink to="/" className="underline text-tertiary">
            return to home page
      </NavLink>
    </div>
 )
}

export default Logout;

在剑道反应文档或聊天 gpt 中没有相关和更新的答案。 请帮助我。

我研究了整个剑道反应文档，聊天 gpt。 我希望有人会醒来，看到这个巨大的问题。

Answer 1

pdfExport 对于地图打印的所有数据都是一样的，所以使得pdfExport对于所有数据都是不同的。所以解决方案是制作一个组件。地图内的任何数据，所有数据都将放置在组件中，并且该组件放置在地图内，以便为所有数据创建不同的 pdfExport。

Answer 2

我的朋友 Eldad 解决了这个问题（仅针对全局状态）

import './style.css';

import React, { useRef } from 'react';

import { PDFExport } from '@progress/kendo-react-pdf';

const App = () => {
  const data = [{ id: 1 }, { id: 2 }, { id: 3 }];

  const pdfExport = data.map((ref) => useRef(null));

  const exportPDF = (i) => {
    pdfExport[i].current.save();
  };

  return (
    <div>
      {data.map((item, i) => (
        <div key={item.id}>
          <PDFExport
            key={item.id}
            ref={pdfExport[i]}
            paperSize="A4"
            margin="2cm"
          >
            <p key={data[i]}>{data[i].id}</p>
          </PDFExport>
          <button key={item.id} onClick={() => exportPDF(i)}>
            Export PDF
          </button>
        </div>
      ))}
    </div>
  );
};

export default App;

有些人知道如何为从数据库获取数据的动态状态解决这个问题？