Автозаполнение пользовательского интерфейса ReactJS: как настроить источник данных

Question

Я использую материал автозаполнения в одном из компонентов реакции. Источник данных поступает с сервера (ответ на асинхронный вызов) и имеет следующую форму

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

Создайте новый источник данных с одним дополнительным ключом "полное имя":

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

Назначьте этот ключ в dataSourceConfig:

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

Используйте этот новый источник данных вместо источника данных при автозаполнении.