如何为MUI Data Grid单元格生成基于行列的动态命名？

我正在使用MUI Data Grid，第一列「资产描述」的值来自数组，Member1、Member2这类表头同样来自数组。我需要在每个字段中输入特定值，通过React-Redux将记录插入数据库，因此需要为表格中关联成员与资产的所有单元格设置唯一的名称。

现有代码 #

数据源定义 #

const membersName = ["Member1", "Member2", "Member3"]; 
const assetTypes = [
    { id: 1, assetTitle: "Cash", assetType: "cash" },
    { id: 2, assetTitle: "Checking Accounts", assetType: "checkAccount" },
    { id: 3, assetTitle: "Other", assetType: "other" },
];

列配置与组件渲染 #

// 货币值列
const assetFileds = membersName.map((items, index) => {
    const name = "cash" + index;
    const newObject = {
        field: "member_" + index,
        headerName: items,
        flex: 1.0,
        disableClickEventBubbling: true,
        sortable: false,
        disableColumnMenu: true,
        renderCell: (params) => (
            <>
                <CurrencyValue
                    fullWidth={false}
                    // defaultValue={params.row.description}
                    variant="standard"
                    name={name}
                    value={values.name}
                    onChange={handleChange}
                />
                <BackupIcon
                    onClick={doOpenModal}
                    visibility={!values.name ? "hidden" : "visible"}
                />
            </>
        ),
    };
    return newObject;
});

const columnForAssetTypes = {
    field: "assetTitle",
    headerName: "Asset Description",
    flex: 1.0,
    disableClickEventBubbling: true,
    sortable: false,
    disableColumnMenu: true,
};

// 渲染最终列
const renderColumns = (array, index, newItem) => {
    return [...array.slice(0, index), newItem, ...array.slice(index)];
};
const finalColumns = renderColumns(assetFileds, 0, columnForAssetTypes);
// 设置列和行
const columns = finalColumns;
const rows = assetTypes;

return (
    <Container>
        <div className="about-yourself">
            <Grid container spacing={3}>
                <Grid item xs={12}>
                    <div className="about-header d-flex">
                        <span className="icon-w-bg-l">
                            <img src={ChildCareProviderImage} alt="App user" />
                        </span>
                        <h3> Asset information</h3>
                    </div>
                    <div style={{ height: 400, width: "100%" }}>
                        <DataGrid
                            rows={rows}
                            columns={columns}
                            pageSize={5}
                            rowsPerPageOptions={[5]}
                            //disableSelectionOnClick
                        />
                    </div>
                </Grid>
            </Grid>
        </div>
    </Container>
);

解决方案 #

要生成唯一的单元格名称，你可以结合当前行的资产类型（assetType）和成员索引/名称来构建，确保每个单元格的名称唯一且有意义：

修改后的assetFileds代码如下：

const assetFileds = membersName.map((memberName, index) => {
    const newObject = {
        field: `member_${index}`,
        headerName: memberName,
        flex: 1.0,
        disableClickEventBubbling: true,
        sortable: false,
        disableColumnMenu: true,
        renderCell: (params) => {
            // 生成唯一名称：资产类型 + 成员标识（索引或名称）
            const cellName = `${params.row.assetType}_member${index}`;
            // 也可以用成员名生成更直观的名称：`${params.row.assetType}_${memberName}`
            return (
                <>
                    <CurrencyValue
                        fullWidth={false}
                        variant="standard"
                        name={cellName}
                        // 注意：value要对应到当前单元格的存储值，需用动态名称取值
                        value={values[cellName] || ""}
                        onChange={handleChange}
                    />
                    <BackupIcon
                        onClick={doOpenModal}
                        visibility={!values[cellName] ? "hidden" : "visible"}
                    />
                </>
            );
        },
    };
    return newObject;
});

关键说明 #

• 生成的名称类似cash_member0、checkAccount_member1，既能区分不同资产类别，又能区分不同成员，完全满足唯一性要求
• 对应的values对象需要以这些动态名称为key存储值，确保handleChange能正确更新对应单元格的数据
• 如果需要更高可读性，可以用成员名称代替索引，生成如cash_Member1的名称

内容的提问来源于stack exchange，提问作者Zaker Husien Yusofi