在嵌套的 .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...

这是相关的代码片段。 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));

在嵌套的 .map 函数中为 <li> 提供唯一键

Giving unique key's to <li>'s inside of nested .map functions

javascript

reactjs

key

unique

array.prototype.map