React: response-datepicker не будет обновлять состояние - PullRequest
Новая
       33

React: response-datepicker не будет обновлять состояние

1 голос
/ 17 марта 2020

Я пытаюсь выполнить изменение даты, но состояние не обновляется. Я использую состояние из реквизита. Так что дата уже существует. Это показывает истекшие даты. Когда я делаю изменения, они застревают на текущую дату.

Что-то мне не хватает в обработчике onChange? 

  constructor(props) {
    super(props);

    const {export} = this.props;
    this.state = {showCalender: false};
    this.date = export.expires;

    this.handleChange = this.handleChange.bind(this);
  }

  static getDerivedStateFromProps(props, state) {
    if (props.export.expires !== state.expires) {
      return {
        expires: props.export.expires
      };
    }
    return null;
  }

  handleChange(date) {
    this.setState({
      expires: date
    }, console.log(this.state.expires));
    this.handleClick();
  }

  handleClick() {
    this.setState({showCalender: !this.state.showCalender});
  }

  handleClear() {
    this.setState({expires: ''});
  }

  render() {
    const {expires, showCalender} = this.state;
    const expiresDate = format(expires, 'MM/dd/yyyy');

    return (
        <div>
          <FormGroup>
            <FormControl
              id="date"
              value={expiresDate}
              onChange={this.handleChange}
              onClick={() => this.handleClick()}
              title="set date"
              aria-label="set date"
            />
            <Button className="close-btn" onClick={() => this.handleClear()}>Clear</Button>
          </FormGroup>
          { showCalender && (
            <FormGroup>
              <DatePicker
                selected={expires}
                onChange={this.handleChange}
                inline
              />
            </FormGroup>
          )}
      </div>
    );
  }

1 Ответ

1 голос
/ 17 марта 2020

Когда вы обновляете состояние, вы запускаете повторный рендеринг, но перед следующим рендерингом response вызывает getDerivedStateFromProps, который вы здесь проверяете, чтобы увидеть, отличаются ли значения: 

static getDerivedStateFromProps(props, state) {
    if (props.export.expires !== state.expires) {
      return {
        expires: props.export.expires
      };
    }
    return null;
  }

Какие они есть, поскольку вы только что обновили state, но props остался прежним. И затем вы снова обновляете состояние, но теперь вы устанавливаете его обратно на любое значение в реквизитах.

Из DOCS :

getDerivedStateFromProps вызывается правильно перед вызовом метода рендеринга, как при первоначальном монтировании, так и при последующих обновлениях.

Я не уверен, почему вы пытаетесь синхронизировать c реквизиты и состояния, но обычно это указывает на плохой дизайн вашего приложения.

Как уже упоминалось в комментариях, не используйте переменную с именем export в качестве зарезервированного слова начиная с ES2015.

Вы можете получить ошибку:

Неожиданное ключевое слово "экспорт"

...