React中slice后map渲染索引重叠，如何保留原始正确索引用于TextField组件

问题根因 #

slice() 方法会返回新的子数组，你在子数组上调用map时拿到的index是子数组自身的索引，不是原paymentRows数组的全局索引，所以第二组分片slice(3,5)的遍历索引还是从0开始，和第一组索引重叠，导致paymentField取值和setPaymentFields传参错误。

修复方案 #

手动给不同分片的索引加上对应偏移量即可：

• 第一组分片slice(0,3)的起始偏移是0，全局索引 = 子数组索引 + 0
• 第二组分片slice(3,5)的起始偏移是3，全局索引 = 子数组索引 + 3

修复后的代码如下：

<Grid container xs={12} sm={12} md={12} lg={6} xl={6} className={classes.marginBottom}>
    {paymentRows.slice(0,3).map((row, index) => {
      const originIndex = index + 0
      return <Grid key={originIndex} item xs={12} className={classes.alignRow}>
      <Typography className={classes.accordionCheckMarkFor+" "+classes.paymentRowBlock} >
        {row}
      </Typography>
    
      {editable[1]?(
        <TextField value={paymentField[originIndex]} onChange={(e)=>{setPaymentFields(e, originIndex)}} variant="outlined" className={classes.paymentTextField}/>
        ):(
        <Typography  className={classes.accordionCheckMarkFor+" "+classes.paymentTextField} >
          {paymentField[originIndex]}
        </Typography>
      )}
    
      </Grid>
    })}
</Grid>
<Grid container xs={12} sm={12} md={12} lg={6} xl={6} className={classes.marginBottom} >
    {paymentRows.slice(3,5).map((row, index) => {
      const originIndex = index + 3
      return <Grid key={originIndex} item xs={12} className={classes.alignRow}>
      <Typography className={classes.accordionCheckMarkFor +" "+classes.paymentRowBlock} >
        {row}
      </Typography>
    
      {editable[1]?(
        <TextField value={paymentField[originIndex]} onChange={(e)=>{setPaymentFields(e, originIndex)}} variant="outlined" className={classes.paymentTextField}/>
        ):(
        <Typography className={classes.accordionCheckMarkFor+" "+classes.paymentTextField} >
          {paymentField[originIndex]}
        </Typography>
      )}
    
      </Grid>
    })}
</Grid>

拓展提示：如果后续分片规则频繁调整，也可以直接遍历原数组通过索引判断归属分组，不用手动维护偏移量，避免修改分片范围时漏改偏移量导致的错误。

内容的提问来源于stack exchange，提问作者Arundeep Chohan