Reactjs 切片和保存索引

Question

我在切片和映射时得到重叠索引 0,1。我如何在做同样的事情时保持相同的索引 thing.I 需要为 {setPaymentFields(e,index)}} 获取正确的索引variant="outlined" className={classes.paymentTextField}/> .

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

Answer 1

slice 每次都返回一个从 0 开始的新数组。尝试在每个 map 中过滤您想要的项目，如下所示：

<Grid container xs={12} sm={12} md={12} lg={6} xl={6} className={classes.marginBottom}>
   {
      paymentRows.map((row, index) => {
         return index <3 ? (<Grid key={index} item xs={12} className={classes.alignRow}>/*JSX*/</Grid>)  : null
      })
    }
</Grid>
<Grid container xs={12} sm={12} md={12} lg={6} xl={6} className={classes.marginBottom} >
    {
      paymentRows.map((row, index) => {
         return index >=3 ? (<Grid key={index} item xs={12} className={classes.alignRow}>/*JSX*/</Grid>)  : null
      })
    }
</Grid>

此外，如果 paymentRow 有一个 ID，我建议将其用作 key 而不是索引。

Reactjs 切片和保存索引

Reactjs Slicing and keeping indexes

slice

reactjs