Material UI X Grid：隐藏和排序的列在重新渲染时返回默认值

Question

我在动态 UI 中使用 Material-UI X Grid，数据更新速度约为 1Hz。当页面使用新数据重新呈现时，任何已排序或隐藏的列都会返回到其默认值，即隐藏列会再次显示，并且列会重新排序到其默认位置。有没有办法阻止这种行为并保持用户选择的状态？我已经搜索了 API 文档和 Material-UI 的支持页面，但没有结果。

Answer 1

我得到了 Material UI 团队的支持，并在这里提供答案，以防它可以帮助其他人。

问题是我需要通过

useState()

钩子将 columns 支撑保持在组件之外。下面包括对我有用的基础知识。

function Table(props) {

    const [cols, setCols] = useState([]);
    const [cols_loaded, setColsLoaded] = useState(false);

    if(!cols_loaded){
        setCols(funcToReturnCols());
    }

    const data = {columns: cols, rows: getRows(props)};

    content = <div className="data-table">
                <XGrid
                    {...data}
                    loading={data.rows.length === 0}
                    rowHeight={30}
                    autoHeight={true}
                    disableColumnMenu={true}
                    density={"compact"}
                    components={{
                        Toolbar: GridToolbar,
                      }}
                />
            </div>
     ;

     return content;
}

文档实际上确实提到了列应该在组件外部维护，并且目的是让它们只包含一次，无论如何，这更聪明！

https://material-ui.com/components/data-grid/columns/

来自上面的链接：“columns 属性应该在两个渲染之间保持相同的引用。列被设计为定义，一旦安装组件就永远不会改变。否则，您将面临丢失列宽状态的风险（如果调整大小）。您可以在渲染函数之外创建数组或将其记忆化。”