React中AG Grid部分值不显示及单元格换行展示问题

一、初始数据缺失、滚动后才显示的问题 #

核心原因是AG Grid默认只渲染视口内的单元格，初始加载时未进入视口的单元格不会执行valueGetter；等滚动回来触发渲染时，API请求已经完成，数据才显示出来。

解决步骤：

• 在第二次、第三次API请求完成并更新完数据后，调用AG Grid的api.refreshCells({ force: true })方法，强制所有单元格重新渲染，这样初始加载时就能显示完整数据，不用等滚动。
• 代码示例：

  // 假设第三个API请求完成后更新数据
  fetchThirdApi().then(res => {
    // 执行数据追加逻辑，将新数据合并到原数据对象
    yourDataSource.forEach(item => {
      // 示例：item.productIdentifiers.assets = [...item.productIdentifiers.assets, ...newAssetData]
    });
    // 调用grid的refreshCells方法触发重渲染
    gridApi.current.refreshCells({ force: true });
  });
  

二、单元格内数值换行展示的问题 #

之前用white-space: pre-wrap没生效，是因为valueGetter返回的数组会被AG Grid自动转成逗号分隔的字符串，没有换行符，pre-wrap需要明确的换行标记才能生效。

改用cellRenderer更合适，它专门用来处理自定义渲染，两种实现方式：

1. 用换行符拼接文本，配合cellStyle：

   {
     headerName: 'Current Best Purchase Price',
     resizable: true,
     wrapHeaderText: true,
     width: 150,
     cellRenderer: (params) => {
       const priceList = params.data.productIdentifiers.assets
         .map(item => item.currentBestPurchasePrice)
         .join('\n');
       return `<div>${priceList}</div>`;
     },
     cellStyle: { whiteSpace: 'pre-wrap' }
   }
   

2. 用多个<div>包裹每个数值，自然换行：

   {
     headerName: 'Current Best Purchase Price',
     resizable: true,
     wrapHeaderText: true,
     width: 150,
     cellRenderer: (params) => {
       return params.data.productIdentifiers.assets
         .map(item => `<div>${item.currentBestPurchasePrice}</div>`)
         .join('');
     }
   }
   

三、valueGetter 和 cellRenderer 的选择 #

• valueGetter：只负责数据的提取、计算，返回纯数据，AG Grid会默认渲染成文本，适合简单的数据获取场景。
• cellRenderer：负责单元格内容的自定义渲染，支持返回HTML或React组件，适合需要格式化、换行、自定义样式的场景，你的需求更适合用它。

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