#javascript #reactjs
Вопрос:
У меня есть массив месяцев, которые я отображаю вдоль оси x графика. Использование date-fns
пакета для форматирования дат.
В this.props.data
:
[
{
"month": 11,
"year": 2020,
},
{
"month": 12,
"year": 2020,
},
...
]
Метод создает массив узлов DOM:
renderXAxis() {
const items = [];
if (this.props.data.length) {
for (const data of this.props.data) {
const month = formatDate(setMonth(new Date(), data.month - 1), 'MMM');
items.push(
<div className="Chart__x-axis__item" key={month data.year}>
<div className="Chart__x-axis__item__month">{month}</div>
</div>,
);
}
}
return items;
}
В моем методе рендеринга я вызываю:
<div className="Chart__x-axis">{this.renderXAxis()}</div>
Он отображает ось X со всеми элементами, отображающими один и тот же месяц. Что странно для меня, так это то, что если я изменю узел DOM, который перемещается в массив элементов, на:
items.push(
<div className="Chart__x-axis__item" key={month data.year}>
<div className="Chart__x-axis__item__month">{`${month}`}</div>
</div>,
);
или
items.push(
<div className="Chart__x-axis__item" key={month data.year}>
<div className="Chart__x-axis__item__month">{formatDate(setMonth(new Date(), data.month - 1), 'MMM')}</div>
</div>,
);
затем все месяцы отображаются так, как они должны быть. Я не понимаю, почему или что происходит..
Комментарии:
1. не могли бы вы поделиться кодами для
formatDate
иsetMonth
?2. @Sphinx это функции из
date-fns
пакета github.com/date-fns/date-fns3. Вы не упомянули, какой месяц один и тот же. Это последний месяц в данных? Или сначала? Или случайно? Я предполагаю, что
{month}
это выполняется лениво, компоненты, помещенные в массив, лениво связывают переменную из области цикла for, поэтому она связывает последнее значение из этой области в прошлом месяце. Попробуйте Array.map вместо этого в качестве доказательства (область обратного вызова карты не может мешать друг другу).