Блог

Главная - Вопросы по программированию - Reactjs Нарезка и сохранение индексов

Reactjs Нарезка и сохранение индексов

#reactjs #slice

Вопрос:

Я получаю перекрывающиеся индексы 0,1 при нарезке и сопоставлении. Как бы я сохранил тот же индекс, делая то же самое?Мне нужно получить правильные индексы для <Значение текстового поля={Поле оплаты[индекс]} onChange={(e)=>{Набор полей оплаты(e,индекс)}} вариант=»очерченное» Имя класса={classes.paymentTextField}/<Значение текстового поля={Поле оплаты[индекс]} onChange={(e)=>> .

  <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>

Комментарии:

1. Можете ли вы более подробно объяснить, что означает «я получаю перекрывающиеся индексы 0,1»? Ваш фрагмент кода срезается с индекса от 0 до 3.

Ответ №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 у вас есть идентификатор, я предлагаю использовать его key вместо индекса.

Метки: