如何使用API在MUI DataGrid Pro中设置columnVisibilityModel

Question

查看Mui中的columnVisibilityModel，它似乎只是一个JSON对象。

我正在调用一个设置 JSON 对象的 API，但如果我将其传递到网格，则会收到错误。

示例对象：

{
  id: false,
  name: true,
  middle: false
}

如果我像这样设置 columnVisibilityModel 它会起作用：

columnVisibilityModel: {
  id: false,
  name: true,
  middle: false
}

但是如果我有一个变量集（即visibleColumns）并尝试这个，它会失败：

columnVisibilityModel: visibleColumns

我尝试使用 apiRef 示例，但没有成功

Answer 1

1. 确保您像这样设置

   visibleColumns

   ：

   const [visibleColumns, setVisibleColumns] =
     React.useState<GridColumnVisibilityModel>({});
   

   或：

   const defaultColumnVisibilityModel = {
     id: false,
     name: false,
     middle: false,
   };
   const [columnVisibilityModel, setColumnVisibilityModel] =
     React.useState<GridColumnVisibilityModel>(defaultColumnVisibilityModel);
   

2. 仔细检查您的 API 确实返回 JSON 对象：

   try {
     const visibleColumns = {
       id: false,
       name: true,
       middle: false
     };
     // or const visibleColumns = await client.query(query) if querying from the DB
     res.status(200).json(visibleColumns);
   } catch (error) {
     console.log(error);
     res.status(500).json("Error fetching visible columns");
   }