Reactjs 切片和保留索引答案

【问题标题】：Reactjs Slicing and keeping indexesReactjs 切片和保留索引
【发布时间】：2021-08-19 03:02:33
【问题描述】：

切片和映射时，我得到重叠索引 0,1。我如何在做同样的事情时保持相同的索引。我需要为 {setPaymentFields(e,index)}} 获取正确的索引variant= "概述" 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>

【问题讨论】：

您能否更详细地解释“我得到重叠索引 0,1 ”是什么意思？您的代码 sn-p 正在从索引 0 切片到 3。

标签： reactjs slice

【解决方案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 而不是索引。

【讨论】：