Reactjs切片和保持索引

Question

切片和映射时，我得到重叠的索引0,1。在做同样的事情时，我该如何保持相同的索引。我需要得到<TextField值＝｛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>

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，而不是索引。