ReactJS Material UI自动完成：如何配置数据源

Question

我在其中一个反应组件中使用了material ui自动完成。数据源从服务器（响应异步调用）接收，并具有以下形状

const dataSource = [{ 
id: 001 
firstName: 'fname', 
lastName: 'lName 
}] 

和配置如下

const dataSourceConfig = { 
text: 'fName', 
value: 'id' 
} 

什么我想要做的是连接firstName和lastName并将其提供给dataSourceConfig

const dataSourceConfig = { 
text: 'fName' + 'lName', 
value: 'id' 
} 

但这不起作用。可能有人请帮我这

Answer 1

试试这个，我认为这将与工作

const dataSource = [{ 
     id: 001, 
     firstName: 'fname', 
     lastName: 'lName' 
}] 

一个额外的键“全名”创建newDataSource：

const newDataSource = dataSource.map(item => { 
     return Object.assign({fullName:item.firstName+ " " +item.lastName},item)}); 

分配在dataSourceConfig这一关键：

const dataSourceConfig = { 
    text: 'fullName', 
    value: 'id' 
} 

使用此newDataSource代替自动完成中的dataSource。