Блог

Моя основная проблема больше связана со следующим (который расположен внизу): как/почему я не могу выполнить цикл через массив и вернуть компоненты React. См. Комментарий в коде, в котором говорится: I never see this, why can't I reach this

Я добавляю пакет npm под названием vertical-timeline-component-react (ссылка).

Основная структура использования этого компонента заключается в следующем:

 <Timeline theme={customTheme} dateFormat='ll'>
  <Container>
    <YearContent startDate='2020/07/01' />
    <BodyContent>
      <Section title='Comment'>
        <Description text='Here is a descriptive comment about this Item' />
      </Section>
    </BodyContent>
  </Container>
  <Container>
    <YearContent startDate='2020/05/10' />
    <BodyContent>      
      <Section title='Comment'>
        <Description text='Waiting to hear back from user' />
      </Section>
      <Section title='Edit'>
        <Description text='Added new User: Sam Smith' />
      </Section>
    </BodyContent>
  </Container>
</Timeline>
 

У меня есть таблица SQL для истории всех изменений в моем приложении для страницы администратора. Когда я возвращаю эти данные, структура ядра выглядит следующим образом

 {
"2018/02/15": [{data for section}, {data for section}]}
"2018/02/05": [{data for section}, {data for section}, {data for section}]}
"2017/12/25": [{data for section}]}
 

Таким образом, я могу перебирать каждый «Контейнер» своей временной шкалы, используя свой ключ объектов (который является датой начала), и внутри каждого «Контейнера» я могу перебирать каждый «Раздел».

Я надеюсь, что все это имеет смысл. Обладая этими знаниями, вот мой код:

 // Imports here

export default function Timeline() {
  // call to server for data which is saved to results.data.history

  const history = results.data.history
  return (
    <Timeline theme={customTheme} dateFormat='ll'>
      {Object.keys(history).forEach(startDate => {
        console.log(startDate) // I can see the start date printed
        return (
          <TimelineContainer startDate={startDate} sections={history[startDate]} />
        )
      })}
    </Timeline>
  )
}

const TimelineContainer = ({startDate, sections}) => {
  console.log("Inside Container") // <--- I never see this, why can't I reach this
  console.log(startDate)
  console.log(sections)
  var timelinesections = sections.map(section => {
    return <TimelineSection
      user={section.user}
      action={section.action}
      parent_type={section.parent_type}
      parent_id={section.parent_id}
      field_type={section.field_type}
      old_value={section.old_value}
      new_value={section.new_value}
    />
  })
  return (
    <Container>
      <YearContent startDate={startDate} />
      <BodyContent>
        {timelinesections}
      </BodyContent>
    </Container>
  )
}

const TimelineSection = ({ key, user, action, parent_type, parent_id, field_type, old_value, new_value }) => {
  return (
    <Section key={key} title={parent_type   ': '   field_type} >
      <Description variant='subtitle' text={'Subtitle if needed'} />
      <Description text={user   ' '   action   'ed: old value was '   old_value   ' and new value is '   new_value} />
    </ Section>
  )
}
 

Я пробовал использовать const ComponentName = () => {} и. function ComponentName() {} Разве это не правильный способ создания компонентов React? Или я иду по этому неправильному пути?

forEach перебирает объекты и ничего не возвращает. Он просто выполняет следующие инструкции. Вы ищете .map здесь.

Заменить forEach на map

 {Object.keys(history).map(startDate => {
    console.log(startDate) // I can see the start date printed
        
    return (
      <TimelineContainer key={startDate} startDate={startDate} sections={history[startDate]} />
    )
})}