Каждый дочерний элемент в списке должен иметь уникальный «ключевой» реквизит с оператором switch

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я перебираю array и внутри этого, я перебираю другое array в операторе switch.

 <TableBody>
  {(rowsPerPage > 0
    ? filteredItems.slice(
        page * rowsPerPage,
        page * rowsPerPage   rowsPerPage
      )
    : filteredItems
  ).map((row, index) => (
    <TableRow key={index}>
      {headers.map(({ value, idx }) => {
        switch (value) {
          case 'status':
            return (
              <TableCell key={idx}>
                {row.status ? (
                  <Button
                    variant='contained'
                    className={classes.red}
                    onClick={() =>
                      changeStatus(row.id, row.status)
                    }
                  >
                    Deactivate
                  </Button>
                ) : (
                  <Button
                    variant='contained'
                    className={classes.green}
                    onClick={() =>
                      changeStatus(row.id, row.status)
                    }
                  >
                    Activate
                  </Button>
                )}
              </TableCell>
            );

         

         

          default:
            if (value.split('.').length === 1) {
              return (
                <TableCell component='th' scope='row' key={idx}>
                  {row[value]}
                </TableCell>
              );
            } else {
              let obj = value.split('.')[0];
              let nestObj = value.split('.')[1];

              return (
                <TableCell component='th' scope='row' key={idx}>
                  {row[obj] amp;amp; row[obj][nestObj]}
                </TableCell>
              );
            }
        }
      })}
    </TableRow>
  ))}
</TableBody>
  

В обоих местах я добавил свойство key. Почему я получаю эту ошибку?

Комментарии:

1. Может быть, он также жалуется <Button> на компоненты?

2. Другое дело, что вы не должны использовать индекс массива в качестве ключа. Это плохая практика, потому что она нарушает идею наличия уникального ключа для идентификации изменений и повторного отображения только измененных элементов коллекции.