时间戳

首页 > 解决方案 > Reactjs 切片和保留索引

reactjs - Reactjs 切片和保留索引

问题描述

切片和映射时，我得到重叠索引 0,1。我如何在做同样的事情时保持相同的索引。我需要为 <TextField value={paymentField[index]} onChange={(e)=>{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>

标签： reactjsslice

解决方案

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代替索引。

推荐阅读