造成这个问题的原因是当网格组件被第一次渲染时，列的宽度尚未计算。因此，针对这个问题的解决方案是使用onGridReady回调方法，以等待获得正确的列宽度信息。以下是一个示例展示如何使用onGridReady回调方法：

import React, { useState, useRef } from "react"; import { AgGridReact } from "ag-grid-react";

function App() { const gridRef = useRef(null); const [gridApi, setGridApi] = useState(null); const [gridColumnApi, setGridColumnApi] = useState(null);

const onGridReady = (params) => { setGridApi(params.api); setGridColumnApi(params.columnApi);

params.api.sizeColumnsToFit();

};

const onButtonClick = () => { gridColumnApi.setColumnVisible("pinnedColumn", false); };

return (

注意，要在columnDefs 和 pinnedColumns 中添加要固定的列。在回调函数onGridReady中，使用setGridApi和setGridColumnApi来设置api和columnApi。以便在组件的其他部分中可以使用这些api。此外，调用params.api.sizeColumnsToFit()来确保所有的列都显示在表格中。

使用onGridReady回调方法可以解决列可见性问题，并保证固定列在第一次渲