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。