ReactJS中如何为Material UI DataGrid传递复杂JSON结构的字段值

原因说明 #

params.getValue() 方法仅支持传入行顶级字段名，不支持a.b.c格式的嵌套路径传参，你传入ami_info.account时，方法会尝试查找行对象中名为ami_info.account的顶级字段，找不到就会返回undefined。

嵌套对象字段访问实现 #

修改列配置如下即可正常读取ami_info.account：

const columns = [
    { field: 'id', headerName: 'ID', width: 90 },
    {
        // field必须为全局唯一值，不要和已有的顶级字段重名
        field: 'ami_info_account',
        headerName: 'AMI账号',
        width: 160,
        valueGetter: (params) => {
            // 先读取顶级字段ami_info，再访问嵌套属性
            const amiInfo = params.getValue('ami_info') || {}
            // 用空值合并符兼容字段不存在的场景，避免报错
            return amiInfo.account ?? ''
        }
    }
]

你也可以直接从params.row读取整行数据后访问属性，写法更直观：

valueGetter: (params) => params.row.ami_info?.account ?? ''

数组类型字段访问实现 #

如果要读取CommandOutputs数组，根据你的展示需求处理即可，示例：

场景1：简单拼接字段展示（用valueGetter）

比如展示所有命令的退出码：

{
    field: 'command_exit_codes',
    headerName: '命令退出码',
    width: 200,
    valueGetter: (params) => {
        const outputs = params.row.CommandOutputs || []
        return outputs.map(item => item.ExitCode).join('、')
    }
}

场景2：自定义渲染复杂结构（用renderCell）

如果要渲染多行列表等结构化内容，用renderCell方法：

{
    field: 'command_outputs',
    headerName: '命令输出详情',
    width: 350,
    renderCell: (params) => {
        const outputs = params.row.CommandOutputs || []
        return (
            <div style={{ fontSize: '12px' }}>
                {outputs.map((item, index) => (
                    <div key={index}>
                        第{index + 1}条：退出码 {item.ExitCode}，错误信息：{item.Stderr}
                    </div>
                ))}
            </div>
        )
    }
}

内容的提问来源于stack exchange，提问作者anish