javascript - ReactJS Material UI 自动完成 : How to Configure data source

Question

我正在使用material ui在 react 组件之一中自动完成。数据源从服务器接收(响应异步调用)并具有以下形状

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”创建一个新数据源:

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

在 dataSourceConfig 中分配此键:

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

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