SolidJS中AG Grid列头名称无法响应式更新问题求助

问题描述 #

现有SolidJS + AG Grid代码，意图通过点击按钮将第一列表头名称从“manufac”修改为“new2”。点击按钮后控制台输出显示表头属性已更新，但AG Grid界面上的表头名称未发生变化，疑似SolidJS Store与AG Grid之间存在响应性适配问题。

原因分析 #

SolidJS的createStore提供细粒度的深层响应式更新，但AG Grid的Solid绑定组件（AgGridSolid）默认仅监听列定义数组的引用变化，而非内部对象的属性变化。当通过setColumnDefs(0, 'headerName', 'new2')修改Store中数组内部对象的单个属性时，数组本身的引用未改变，导致AG Grid未触发表头重新渲染。

解决方案 #

提供两种可行的解决思路：

方案1：触发列定义数组的引用更新 #

通过创建新的列定义数组，让AG Grid感知到引用变化从而更新表头：

const fn_change2 = () => {
  console.log('change2  ');
  // 函数式更新，生成新数组触发响应
  setColumnDefs(prevCols => {
    const updatedCols = [...prevCols];
    // 复制原对象并修改属性，避免直接修改原Store对象
    updatedCols[0] = { ...updatedCols[0], headerName: 'new2' };
    return updatedCols;
  });
  console.log(columnDefs[0].headerName);
};

方案2：调用AG Grid API手动刷新表头 #

通过获取Grid实例，直接调用AG Grid的API强制刷新表头，无需改变数组引用：

// 先引入createRef并创建Grid引用
import { createRef } from "solid-js";

function PageThree() {
  const gridRef = createRef();
  
  // ... 其他代码不变
  
  const fn_change2 = () => {
    console.log('change2  ');
    setColumnDefs(0, 'headerName', 'new2');
    console.log(columnDefs[0].headerName);
    // 调用AG Grid API刷新表头
    gridRef.current?.api.refreshHeader();
  };
  
  return (
    <>
      {/* ... 其他元素不变 */}
      <div class="ag-theme-balham" style={{ height: '100%' }}>
        <AgGridSolid
          ref={gridRef} // 绑定引用
          columnDefs={columnDefs}
          rowData={rowData}
        />
      </div>
    </>
  );
}

说明 #

• 方案1更贴合SolidJS的响应式设计理念，让组件自动感知变化并更新；
• 方案2适合需要保留原数组引用的场景，直接通过AG Grid的API控制更新时机。

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