使用react-pdf/renderer渲染动态表格时遇文本组件报错及数据展示问题

一、搞定"Invalid 'Remarks' string child outside component"错误 #

为啥会报这个错？因为react-pdf/renderer有硬性要求：所有文本内容必须套在<Text>组件里，不管是表格单元格里的动态数据，还是像"mm/s"这种静态文本都不能例外。你代码里直接在<TableCell>里塞了数字、数组或者字符串，没包<Text>，所以触发了错误。

怎么修？

• 所有单元格里的文本，不管是动态的还是静态的，全给它套上<Text>
• 你用Array.from(new Set(...))得到的是数组，直接渲染会出问题，要么转成逗号分隔的字符串（用.join(', ')），要么遍历数组每个元素单独包<Text>

改完后的代码示例：

<Table>
  <TableRow>
    <TableHead><Text>No</Text></TableHead>
    <TableHead><Text>VM name</Text></TableHead>
    <TableHead><Text>Sensor ID</Text></TableHead>
    <TableHead><Text>Locations</Text></TableHead>
    <TableHead><Text>Vibration limits criteria (10 Hz)</Text></TableHead>
    <TableHead><Text>Vibration limits criteria (80 Hz)</Text></TableHead>
    <TableHead><Text>Proposed alarm level</Text></TableHead>
  </TableRow>

  {Object.values(reportdata).map((arr, index) => (
    <TableRow key={index} style={style.row}>
      <TableCell style={style.cell}>
        <Text>{index + 1}</Text>
      </TableCell>
      <TableCell style={style.cell}>
        <Text>{Array.from(new Set(arr.map(item => item[headerItem]))).join(', ')}</Text>
      </TableCell>
      <TableCell style={style.cell}>
        <Text>{Array.from(new Set(arr.map(item => item.sensor_id))).join(', ')}</Text>
      </TableCell>
      <TableCell style={style.cell}>
        <Text>{Array.from(new Set(arr.map(item => item.vibration_max_limit))).join(', ')} mm/s</Text>
      </TableCell>
      <TableCell style={style.cell}>
        <Text>{Array.from(new Set(arr.map(item => item.vibration_max_limit))).join(', ')} mm/s</Text>
      </TableCell>
      <TableCell style={style.cell}>
        <Text>{Array.from(new Set(arr.map(item => item.vibration_max_limit))).join(', ')} mm/s</Text>
      </TableCell>
      <TableCell style={style.cell}>
        <Text>{Array.from(new Set(arr.map(item => item.vibration_max_limit))).join(', ')} mm/s</Text>
      </TableCell>
    </TableRow>
  ))}
</Table>

说明：

• 表头的文本也套了<Text>，统一规范避免后续踩坑
• 用.join(', ')把数组转成逗号分隔的字符串，这样渲染出来就是正常的文本
• 把动态数据和"mm/s"放在同一个<Text>里，确保所有文本都被正确包裹

二、解决Props传递后数据不显示的问题 #

常见的几个坑和解决办法：

1. 数据不能序列化：react-pdf是在Node环境渲染的，传的props必须是纯JSON格式，不能有函数、循环引用这类东西。检查下reportdata是不是纯数据结构。
2. 异步数据还没加载好：如果reportdata是从接口拿的，渲染PDF的时候可能数据还没回来。得等数据加载完再渲染PDF组件：

   // 举个例子：父组件里等数据加载完再渲染PDF
   function ParentComponent() {
     const [reportdata, setReportdata] = useState(null);
   
     useEffect(() => {
       // 模拟接口请求
       fetch('/api/get-report-data')
         .then(res => res.json())
         .then(data => setReportdata(data));
     }, []);
   
     if (!reportdata) return <div>加载中...</div>;
   
     return <PDFViewer><MyDocument reportdata={reportdata} /></PDFViewer>;
   }
   

3. Props传错地方了：检查下reportdata是不是真的传到了渲染表格的组件里，确保在表格组件里能通过props.reportdata拿到数据。
4. 数据结构不对：确认下reportdata的结构和你代码里用的匹配不。比如item[headerItem]里的headerItem是不是存在，item.sensor_id、item.vibration_max_limit这些字段有没有写错。

内容的提问来源于stack exchange，提问作者Mohan Raj