javascript - 在 React/Javascript 中查找 Map 的第一个迭代

Question

我正在 React 中映射一个对象数组，我想找到 chosenFields 的第一次迭代大批。

人物数组:

[ { id:1, name:"Jim", occupation:"Programmer".........} 
  {id:2, name:"Sally", occupation:"Pet Sitter".......}]

我有另一个对象数组，负责从 PeopleArray 中显示哪些字段:

选择字段数组:

[{label:"id", show:true}, {label:"name", show:true}, {label:"occupation", show:false}]

我想知道是否有一种方法可以让代码在第一次迭代 chosenFields 时进行识别People 的每一行的数组数组

    renderSingleData(rowListData, currData){ 
      //find which one is the first iteration to add a radiobox for each row
   }

    renderUserData(currRow){
        return(
            <div>
                {chosenFields.map(this.renderChosenData.bind(this, currRow)}            
            </div>
        )
    }

  render() {
    return (
        <div >
            {PeopleData.map(this.renderUserData.bind(this))}
        </div>
    );
  }
}

这是代码的非常简化的版本。我需要通过<td>向表添加迭代。我目前正在 React 中使用变量并使用计数器设置状态。我想知道是否有更直接的方法来通过映射函数查找迭代。

Answer 1

看看 docs对于Array.prototype.map()

回调函数的第二个参数是索引。如果为 0，则这是回调的第一次迭代。在您的情况下，您可能需要将该条件传播到几个回调中。类似...

renderSingleData(isFirst, rowListData, currData){ 
    //find which one is the first iteration to add a radiobox for each row
}

renderUserData(currRow, currIdx){
    return(
        <div>
            {chosenFields.map(this.renderChosenData.bind(this, currIdx === 0, currRow)}            
        </div>
    )
}

render() {
    return (
        <div >
            {PeopleData.map(this.renderUserData.bind(this))}
        </div>
    );
}