React.js: Как проверить после обновления реквизита? - PullRequest
Новая
       6

React.js: Как проверить после обновления реквизита?

0 голосов
/ 22 декабря 2018

У меня есть 4 поля формы, в которые пользователь может выбрать или ввести значение, чтобы перейти к следующему шагу.Вот одно из этих полей: 

<Form.Field
  control={Checkbox}
  checked={this.props.donationCheckbox10}
  label='$10'
  value={10}
  onChange={() => {
    this.props.dispatchUpdateStateData('', 'donationInputField');
    this.props.dispatchUpdateStateData(!this.props.donationCheckbox10, 'donationCheckbox10');
    this.clearTheOtherCheckboxes(10);
    console.log(store.getState());
    this.checkIfReadyToAdvance();
  }}
/>

Как вы можете видеть, оно отправляет некоторые действия для обновления хранилища Redux, а затем проверяет, может ли пользователь продвинуться вперед.

Проблема в том, что условие продвижения всегда не выполняется, потому что реквизит еще не обновлен и не перерисован.По крайней мере, я думаю, что это проблема, основанная на ведении журнала this.checkIfReadyToAdvance() (вызов getState () возвращает обновленные значения, потому что он не ожидает повторного рендеринга)

Я считаю, componentWillUpdate() устарела.Каков современный способ запуска функции после обновления компонента хранилищем Redux?

Вот checkIfReadyToAdvance()

checkIfReadyToAdvance() {
    if (
      this.props.donationCheckbox10 ||
      this.props.donationCheckbox25 ||
      this.props.donationCheckbox50 ||
      this.props.donationInputField
    ) {
      this.setState({
        canNotAdvance : false
      });
      console.log("ready");
    } else {
      this.setState({
        canNotAdvance : true // in case all values are falsey again
      });
      console.log("not ready");
    }
  }

1 Ответ

0 голосов
/ 22 декабря 2018

Нет особых оснований для хранения производной информации, если только вычисление этой информации не приводит к высокой производительности. 

isReadyToAdvance() {
   const { props } = this;

   return
      props.donationCheckbox10 ||
      props.donationCheckbox25 ||
      props.donationCheckbox50 ||
      props.donationInputField;
}

, а затем просто используйте !this.isReadyToAdvance() вместо this.state.canNotAdvance.

ТехническиВы также можете использовать componentWillUpdate (устарело) для обновления state или нового getDerivedStateFromProps .

...