Inline MaterialTable Редактировать с DropDown

Question

Я пытаюсь создать MaterialTable со встроенным редактируемым полем, в котором есть выпадающий список. Кажется, проблема в объекте columns . С атрибутом lookup можно указать пары ключ: значение в качестве элементов раскрывающегося списка. Моя дилемма, похоже, заключается в том, что я не могу перебрать список и добавить пары ключ-значение ниже, как показано ниже. Кажется, он работает только когда написано как lookup: {1: «Test Value», 2: «Test Value 2»} . Пожалуйста, объясните, если мое понимание неверно.

<MaterialTable
    title="Available Attributes"
    icons={this.tableIcons}
    data={availableAttributesList}
    columns={[
      { title: 'Attribute', field: 'name' },
      {
        title: 'Data Type',
        field: 'dataType',
        lookup: { dataTypePayload.map((attribute, name) => ({
         attribute.id : attribute.dataType
        }))}
      }
    ]}
    options={{
      actionsColumnIndex: -1
    }}
    editable={{

      onRowAdd: newData =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            {
              const data = editableAvailableAttributesList;
              data.push(newData);
              this.setState({ data }, () => resolve());
            }
            resolve();
          }, 1000);
        }),
      onRowUpdate: (newData, oldData) =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            {
              const data = editableAvailableAttributesList;
              const index = data.indexOf(oldData);
              data[index] = newData;
              this.setState({ data }, () => resolve());
            }
            resolve();
          }, 1000);
        }),
      onRowDelete: oldData =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            {
              let data = availableAttributesList;
              const index = data.indexOf(oldData);
              data.splice(index, 1);
              this.setState({ data }, () => resolve());
            }
            resolve();
          }, 1000);
        })
    }}
  />

Answer 1

map создает массив объектов, который вы затем помещаете в другой объект.

Как вы заметили, это не будет работать. Чтобы получить нужный формат, попробуйте это:

<MaterialTable
  // ...other props
  columns={[
    { title: 'Attribute', field: 'name' },
    {
      title: 'Data Type',
      field: 'dataType',
      lookup: dataTypePayload.reduce((acc: any, attribute: any) => {
        acc[attribute.id] = attribute.dataType
        return acc
      }, {})
    }
  ]}
  // ...other props
/>

Надеюсь, это поможет!