#javascript #reactjs #components
Вопрос:
Моя основная проблема больше связана со следующим (который расположен внизу): как/почему я не могу выполнить цикл через массив и вернуть компоненты 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? Или я иду по этому неправильному пути?
Комментарии:
1. Привет. Можете ли вы рассказать нам, с какой именно проблемой вы столкнулись?
2. Оба способа объявления компонентов должны быть в порядке. Вы проверяли наличие каких-либо ошибок в консоли ?
3. Эммануэль, проверь мои новости.
4. Сушант, в моей консоли нет ошибок. Как показывают комментарии, я вижу свои ключи, но никогда не дотягиваюсь до своей консоли. журналы для компонента
TimelineContainer
. Я не знаю, почему я никогда не добираюсь до этих консольных журналов.
Ответ №1:
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]} />
)
})}
Комментарии:
1. Это одновременно и неловко, и то, что такое программирование. Простые ошибки, которые поражают воображение, пока кто-то не укажет на очевидное. Большое вам спасибо @Sushanth, именно то, что мне нужно.