Блог

Главная - Вопросы по программированию - Реагируйте — странное поведение при циклировании данных

Реагируйте — странное поведение при циклировании данных

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

3. Вы не упомянули, какой месяц один и тот же. Это последний месяц в данных? Или сначала? Или случайно? Я предполагаю, что {month} это выполняется лениво, компоненты, помещенные в массив, лениво связывают переменную из области цикла for, поэтому она связывает последнее значение из этой области в прошлом месяце. Попробуйте Array.map вместо этого в качестве доказательства (область обратного вызова карты не может мешать друг другу).

Метки: