为嵌套 .map 函数内部的 <li> 赋予唯一键

Question

我有一个需要嵌套映射函数才能工作的函数。这是因为我正在构建一个矩阵网格问题表格。首先是问题，从一个数组映射，然后是嵌套的.map 函数，用于该问题的可能选择。

这适用于第一行问题。问题是我分配的所有Choices（即同意、不同意等）的id 只是1, 2, 3, or 4。然后这与下一个问题重复。

因此，第一个问题之后的所有问题，在选择选项时只会影响第一个问题。我需要一种方法来继续增加 id 数字。

这是一个例子：

Question 1: {id}'s to assign: 1, 2, 3, 4
Question 2: {id}'s to assign: 5, 6, 7, 8 etc...

这是相关的sn-p代码。 params 是一个包含 2 个数据数组 SubFields 和 Choices 的对象，它们是我映射的对象。

renderFieldlikert(params) {
    let matrixQuestion = params.SubFields.map(function(o, x) {
      let questionText = (<li className='left-column'><h4 className='text-left'>{o.Label}</h4></li>);
      let radioButtons = params.Choices.map(function(y, i) {
        let v = y.Score
        return(
          <li className='animated fadeIn'>
            <input onChange={(e) => this.props.handleRadioChange(o.ID, e)} type="radio" name={o.Label} id={i} key={i} value={v} />
            <label htmlFor={i}>{y.Score}</label>
          </li>
        )
      }.bind(this));

Answer 1

一个简单的计数器变量就可以解决问题。

renderFieldlikert(params) {
var count = 0;
let matrixQuestion = params.SubFields.map(function(o, x) {
  let questionText = (<li className='left-column'><h4 className='text-left'>{o.Label}</h4></li>);
  let radioButtons = params.Choices.map(function(y, i) {
    count++;
    let v = y.Score;
    return(
      <li className='animated fadeIn'>
        <input onChange={(e) => this.props.handleRadioChange(o.ID, e)} type="radio" name={o.Label} id={count} key={count} value={v} />
        <label htmlFor={count}>{y.Score}</label>
      </li>
    );
  }.bind(this));

请注意，这会破坏地图函数的纯功能性质（即，它是一种副作用）。您可能需要考虑切换到旧的 for 循环。

另外，由于内部map 始终在相同长度的数组上执行，您可以显式计算索引。

renderFieldlikert(params) {
let matrixQuestion = params.SubFields.map(function(o, x) {
  let questionText = (<li className='left-column'><h4 className='text-left'>{o.Label}</h4></li>);
  let radioButtons = params.Choices.map(function(y, i) {
    var count = params.Choices.length*x + i + 1;
    let v = y.Score;
    return(
      <li className='animated fadeIn'>
        <input onChange={(e) => this.props.handleRadioChange(o.ID, e)} type="radio" name={o.Label} id={count} key={count} value={v} />
        <label htmlFor={count}>{y.Score}</label>
      </li>
    );
  }.bind(this));