Блог

Я пытался использовать метод map, как я видел в своих исследованиях о том, как это сделать, но, похоже, это не тот метод, который следует использовать, когда у меня есть структура, подобная приведенной ниже:

 const stepLabels = [
  { labels1: ['First One'] },
  { labels2: ['Second One', 'second One'] },
  { labels3: ['Third One', 'Third One', 'Third One'] }
];
 

И я использую Material UI Stepper, чтобы попытаться отобразить метки шагов ниже

 <Stepper alternativeLabel activeStep={2} connector={<StepConnector active completed classes={{ line: classes.connector, active: classes.activeConnector, completed: classes.activeConnector }} />} className={classes.stepper}>
        {steps.map(label => (
          <Step key={label}>
            <StepLabel classes={{ root: classes.stepLabelRoot }}>
              <span>
                { stepLabels.map(item => item.labels)}
              </span>
            </StepLabel>
          </Step>
        ))}
      </Stepper>
 

Пытаясь получить это, где под каждым узлом будет отображаться метка. Итак, под первым узлом будет написано :

Ниже первого узла будет показано

 First One
 

Второй будет отображаться в два раза ниже второго узла

 Second One
Second One
 

Третий будет отображаться три раза на третьем узле

 Third One
Third One
Third One
 

Я пытался решить эту проблему в течение часа, но, похоже, не могу найти ответ на этот вопрос.

Это действительно сбивает с толку, потому что я знаю, как использовать метод map, но эта структура немного сбивает с толку. Я пробовал и ошибался и каждый раз получал разные ошибки. Как будто что-то не определено и т.д.

Вам нужно использовать одно и то же имя свойства во всех элементах списка, если вы хотите выполнить итерацию и что-то с этим сделать. Ваш код:

 const stepLabels = [
  { labels1: ['First One'] },
  { labels2: ['Second One', 'second One'] },
  { labels3: ['Third One', 'Third One', 'Third One'] }
];
 

Следует изменить на:

 const stepLabels = [
  { labels: ['First One'] },
  { labels: ['Second One', 'second One'] },
  { labels: ['Third One', 'Third One', 'Third One'] }
];
 

Если вы хотите добавить новую строку, вы можете добавить br элемент:

 <Stepper alternativeLabel activeStep={2} className={classes.stepper}>
  {stepLabels.map((label) => (
    <Step key={label}>
      <StepLabel classes={{ root: classes.stepLabelRoot }}>
        {label.labels.map((item) => (
          <>
            {item}
            <br />
          </>
        ))}
      </StepLabel>
    </Step>
  ))}
</Stepper>