Question

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

People Array：

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

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

selectedFields Array：

[{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中使用变量并使用计数器设置状态。我想知道是否有更简单的方法通过map函数找到迭代。

Answer 1

查看Array.prototype.map()

的docs

回调函数的第二个参数是索引。如果这是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>
    );
}

在React / Javascript

1 个答案: