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'
}]

使用一个额外的键“fullName”创建一个newDataSource：

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

在dataSourceConfig中分配此密钥：

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

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