reactjs - 如何在 Material-UI 的 DataGrid 中动态添加 singleSelect 列的 valueOptions？

Question

这是我在 SO 中的第二个问题，因此对于在询问和格式化我的问题时出现的任何错误表示歉意。我一直在努力完成瓷砖所说的。基本上，我有以下用于定义列的数组示例：

[
{
    field: 'name',
    headerName: 'Name',
    flex: 1,
    editable: true
},
{
    field: 'address',
    headerName: "Address",
    flex: 1,
    editable: true
},
{
    field: 'country',
    headerName: "Country",
    flex: 1,
    editable: true,
    type: 'singleSelect',
    valueOptions: 
    [
        // This should be dynamic
    ]
},
]

这是从一个单独的文件中导出的，然后导入到使用带有这些列定义的 DataGrid 的 React 组件中。

当用户登录时，这些选项是从我的 REST API 中获取的，并且每个用户的选项都不同。

无论如何我可以在初始定义之后动态分配valueOptions列吗？country

谢谢！

PS：我正在使用 Material-UI 的 DataGrid 的免费版本。

标签： reactjsdatagridmaterial-ui

Answer 1

在获得 REST 服务的答案后，您可以更改“valueOptions”字段的值：

fetch("your endpoint").then(answer => {
  columnsConfig.filter(column => column.field === "country").valueOptions = answer;
})

PS：您可能必须在设置 valueOptions 的值之前转换答案