Question

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

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

因此，选择选项后问题1之后的所有问题只会影响第一个问题。我需要一种方法来继续增加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＆amp;的对象。 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>提供唯一键

1 个答案: