Отображение через массив объектов не работает в React - PullRequest
Новая
       17

Отображение через массив объектов не работает в React

0 голосов
/ 17 декабря 2018

Я хочу вставить идентификатор ключа в приложение React.В настоящее время мой ключ заполняется свойством Object.name.Это не идеально, так как это может быть дублировано, и тогда React начнет жаловаться.Сервер не возвращает такой ключ.

Итак, я подумал, я бы отобразил этот массив и использовал index в своем параметре key.Итак, вот что я сделал: 

const item = itemsList.map((item, index) => ({
  ...item,
  index
}));

И использовал это здесь в своем компоненте: 

<TableWithSearch
  keyField="item.index"
  data={itemsList}
  columns={getItemsTableColumns()}
  search
>

Я думаю, что это достаточно просто понять.Но тогда мое приложение вылетает.С ошибкой:

Warning: Each child in an array or iterator should have a unique "key" prop..

Очевидно, что я делаю что-то не так, но я смотрю на это в течение последнего часа и до сих пор не могу понять это.

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Хорошо, после нескольких часов размышлений о ваших комментариях и ответах и ​​некоторых экспериментах я нашел решение.

Для более подробного объяснения решения я опубликую весь свой компонент: 

export class ItemsList extends Component {
  static propTypes = {
    listItems: PropTypes.func.isRequired
  };

  componentDidMount() {
    const { listItems } = this.props;
    listItems();
  }

  renderGroups() {
    const { itemsList, user } = this.props;
    const items = itemsList.map((item, index) => ({
      ...item,
      index
    }));
    return (
      <Fragment>
        {itemsList.length > 0 ? (
          <Fragment>
            <PageHeader>
              Groups
              <span>({itemsList.length})</span>
            </PageHeader>
            <div className="mb-2">
              <TableWithSearch
                keyField="index"
                data={items}
                columns={getItemsTableColumns()}
                search
              >
              </TableWithSearch>
            </div>
          </Fragment>
        ) : (
            <div>no items</div>
          )}
      </Fragment>
    );
  }

Моя ошибка состояла в том, что я передавал его ListGroups в качестве атрибута данных, что, в свою очередь, делало невозможным для компонента чтение массива групп и получение его индекса Ids van der Zee было правильным вего комментарий.

По какой-то причине синтаксис JSX для атрибута ключа не сработал, как вы, ребята, предположили.Я не исследовал это, но я сделаю и прокомментирую ниже.

Приведенный выше пример работает как шарм.Если вы знаете, почему не работает синтаксис JSX, пожалуйста, не стесняйтесь комментировать.Спасибо за вашу помощь, ребята ..

0 голосов
/ 17 декабря 2018

keyField = "item.index" неверно.Вы передаете это как строку, поэтому вы видите эту ошибку.Каждый элемент получает одинаковое строковое значение «item.index»

Это должно быть keyField = {item.index}

...