Javascript 如何修复附加字段、删除并在渲染字段上显示

而不是

[{ id:null， 代码：空， 名称：空， 角色：null },{ id:null， 代码：空， 名称：空， 角色：null }]

打开抽屉时，应仅显示一个字段

例如，我有一个现有的数据

[{
            id: null,
            code: null,
            name: null,
            role: null
          }]

当数据存在时，如何在select角色上显示select where data角色上的数据，以及在select应用程序上显示rowData应用程序

[{
            id: null,
            code: null,
            name: null,
            role: null
          }]

const [rowData, setRowData] = useState([{
      name: 'jake',
      application: [{id: 3,
      code: "i1",
      name: "IOS",
      role: "USER"
}]
    }])