Реагировать: объединить строку для ключа

Question

Я создаю список списка и хочу поставить уникальный ключ для каждого элемента. Когда я использую React Dev Tool, новый ключ "2016-10,-, футбол".

• Почему в нем запятые?
• Как правильно указать ключ, когда я хочу "2016-10-футбол"?

React Dev Tool Console

import React from 'react'
import ReactDOM from 'react-dom'

const dates = ['2016-10', '2016-11', '2016-12'];
const sports = ['football', 'baseball', 'basketball'];

const Dates = ( { dates, sports } ) => {
  return (
    <ul>
      { dates.map( date => {
        return (
          <div key={date.toString()}  >
            <li>{date}</li>
            <Sports sports={sports} date={date}/>
          </div>
          )
        })
      }
    </ul>
    )
}

const Sports = ( { date, sports } ) => {
  return(
    <ul>
      { sports.map( sport => {
        // Results in: key="2016-10,-,football"
        // Expected: key="2016-10-football"
        return (<li key={[date, '-', sport]} >{sport}</li>)
      })}
    </ul>
    )
}

ReactDOM.render(<Dates dates={dates} sports={sports}/>, document.getElementById('main'))

Answer 1

key ожидает строку, поэтому при передаче массива вы вызываете функцию.toString() массива. Вы увидите тот же результат, если вы делаете console.log([date, '-', sport].toString())

замещать [date, '-', sport] с date + '-' + sport починить это.

Answer 2

Это показывает с запятыми, потому что toString будет использовать запятые, чтобы присоединиться к массиву.

Это то, что у вас есть:

arr = ['2016-10', '-', 'football']
console.log(arr.toString); // "2016-10,-,football"

Это то, что вы хотите:

arr = ['2016-10', '-', 'football']
console.log(arr.join()); // "2016-10-football"

Так что подумайте о замене li чтобы (обратите внимание на .join()):

return (<li key={[date, '-', sport].join()} >{sport}</li>)

Answer 3

Добавлено несколько примеров для лучшего понимания

key={'company_'+index} // key={дата +'-'+спорт}

      <TableCell key={'company_'+index} align="right">
     {row.company?.name}
</TableCell>


return(
    <ul>
      { sports.map( sport => {
        // Results in: key="2016-10,-,football"
        // Expected: key="2016-10-football"
        return (<li key={date +'-'+sport} >{sport}</li>)
      })}
    </ul>
    )

Answer 4

У меня не было проблем с использованием знака плюс для объединения двух полей для создания уникального ключа:

       {rows.map((Group) => (
      <li key={Group.user_id + Group.lgroup_id}>
      -- Display the parts of the Group object here.  --
      </li>
 ))}