我如何连接一个反应键的字符串？

Question

我正在创建一个列表列表，并希望为每个元素设置一个唯一的键。当我使用React工具时，新的键是"2016-10，-，足球“。

• 为什么里面有逗号？
• 当我想要“2016-10-足球”时，正确的方法是什么？

React工具控制台

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>)

编辑:对预期结果使用联接(“”)，应该将分隔符(在本例中为空字符串)传递给方法的参数。例如，['2016-10', '-', 'football'].join('~separator~')将返回"2016-10~separator~-~separator~football"

Answer 3

添加了一些示例，以更好地理解

key={'company_'+index} // key={date +‘-’+体育}

<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>
    )