Prime React Tooltip条件显示及初始数据异常问题修复求助

核心原因 #

首次hover时Tooltip显示length为0，是因为Tooltip组件未实时响应rowData.prAttachDtoList的更新，或初始渲染时读取了未完成赋值的空数组；条件显示需通过判断数组长度控制Tooltip是否渲染。

具体修复步骤 #

1. 确保接口数据正确格式化
   在useEffect的接口请求中，为每个列表项兜底处理prAttachDtoList字段，避免undefined导致length读取错误：

   useEffect(() => {
     fetch('http://localhost:8081/view/all')
       .then(res => res.json())
       .then(rawData => {
         const formattedList = rawData.map(item => ({
           ...item,
           // 兜底为空数组，避免后续读取length报错
           prAttachDtoList: item.prAttachDtoList || []
         }));
         setPrList(formattedList);
       })
       .catch(err => console.error('数据请求失败:', err));
   }, []);
   

2. 实现Tooltip的条件渲染与实时数据绑定
   在attachmentBodyTemplate中，直接基于当前rowData判断是否显示Tooltip，确保每次渲染都读取最新的数组长度：

   const attachmentBodyTemplate = (rowData) => {
     const hasAttachments = rowData.prAttachDtoList.length > 0;
     return (
       <>
         {hasAttachments ? (
           <Tooltip title={`Attachment Count: ${rowData.prAttachDtoList.length}`}>
             <span>📎</span> {/* 替换为你实际的附件图标/文本 */}
           </Tooltip>
         ) : (
           <span>-</span> {/* 无附件时显示的占位内容 */}
         )}
       </>
     );
   };
   

3. 强制Tooltip响应数据变化（针对第三方UI库）
   如果使用第三方Tooltip组件（如PrimeReact、Material-UI）存在缓存机制，可添加唯一key强制组件重新渲染，确保title实时更新：

   <Tooltip
     key={`tooltip-${rowData.id}-${rowData.prAttachDtoList.length}`}
     title={`Attachment Count: ${rowData.prAttachDtoList.length}`}
   >
     <span>📎</span>
   </Tooltip>
   

   注：rowData.id需为每行数据的唯一标识，保证不同行的Tooltip互不干扰。

4. 确认DataTable数据源绑定正确
   确保DataTable的value属性直接绑定prList，保证数据更新时表格能重新渲染：

   <DataTable
     value={prList}
     columns={[
       // 其他列配置
       {
         header: 'Attachment',
         body: attachmentBodyTemplate
       }
     ]}
   />
   

内容的提问来源于stack exchange，提问作者Samet Dağ