массив дат реагирования не обновляется после установки состояния - PullRequest
Новая
       5

массив дат реагирования не обновляется после установки состояния

0 голосов
/ 25 мая 2018

У меня есть компонент DayPicker, который позволяет пользователю выбирать несколько дат.Я храню эти данные в массиве Date объектов, которые отправляются редуктору, когда пользователь нажимает следующий в многоступенчатой ​​форме.Однако, если я вернусь к этой форме, я не смогу добавить И удалить какие-либо даты.Вот как выглядит мой компонент 

    class StepThree extends Component {
  static getDerivedStateFromProps = (nextProps) => {
    const {
      stepThree: { dates }
    } = nextProps;
    const shouldUpdate = dates.length !== 0;
    if (shouldUpdate) {
      const newDates = dates.map(date => new Date(date));
      return {
        dates: newDates
      };
    }
    return null;
  };

  state = {
    dates: []
  };

  handleDayClick = (day, { selected }) => {
    const { dates } = this.state;
    if (selected) {
      const selectedIndex = dates.findIndex(selectedDay => DateUtils.isSameDay(selectedDay, day));
      dates.splice(selectedIndex, 1);
    } else {
      dates.push(day);
    }
    this.setState({ dates });
  };

  handleNext = (e) => {
    e.preventDefault();
    this.props.setStepThree(this.state.dates);
  };

  render() {
    return (
      <Col>
        <Col style={{ textAlign: 'center' }}>
          <DayPicker selectedDays={this.state.dates} onDayClick={this.handleDayClick} />
        </Col>
        <div
          style={{
            width: '100%',
            position: 'fixed',
            bottom: '0px',
            zIndex: '100',
            textAlign: 'center',
            padding: '10px',
            left: '0px'
          }}
        >
          <PreviousButton handleClick={this.props.handlePrevious} />
          <NextButton handleClick={this.handleNext} />
        </div>
      </Col>
    );
  }
}

. Когда я возвращаюсь в эту форму, я вижу, что новая дата передается в метод handleClick, но он не добавляется в массив.Состояние остается именем.

ПРИМЕЧАНИЕ. Это воспроизводимый шаблон после первого заполнения формы пользователем.После первого раза, это в основном не редактируемое.

Это код редуктора 

    case ACTIONS.SET_STEP_THREE: {
        const newDates = action.dates.map(d => new Date(d));
        return {
          ...state,
          stepThree: {
            ...state.stepThree,
            dates: newDates
        }
     };
   }

1 Ответ

0 голосов
/ 26 мая 2018

Перемещение или удаление даты в / из массива дат не изменит его ссылку.Вы должны воссоздать массив дат, чтобы обновить его ссылку и позволить реагировать, чтобы обнаружить изменения состояния компонента.Вы можете использовать любой метод для воссоздания массива дат exp: array.concat или array.slice или синтаксиса Spread let newDatesRf = [...dates];

handleDayClick = (day, { selected }) => {
   const { dates } = this.state;
   if (selected) {
     const selectedIndex = dates.findIndex(selectedDay => 
        DateUtils.isSameDay(selectedDay, day));
     dates.splice(selectedIndex, 1);
   } else {
    dates.push(day);
   }
   let newDatesRf = [...dates];//copy dates array to a new array
   this.setState({ dates:newDatesRf });
};
...