Триггер onChange при установке состояния в componentDidMount?

Question

Мне нужно добавить несколько параметров запроса в мой URL, когда человек снимает флажки.

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

  const stringified = queryString.stringify(parsed);
  const path = `${this.props.location.pathname}?${stringified}`;
  this.props.history.replace(path)

Однако, похоже, это вызывает повторную визуализацию страницы (не уверен, что это должно произойти, я бы предпочел, чтобы это не делалось, поэтому, возможно, мне придется использовать что-то другое, кроме замены?).

Я хотел проверить на componentDidMount URL, чтобы увидеть, есть ли значение там.Если это так, то я хотел бы обновить состояние флажка.

  @observable
  isChecked = false;

  @action
  componentDidMount() {
    const parsed = queryString.parse(this.props.location.search);
    this.isChecked = parsed && parsed["param"] === this.props.option;
  }

Однако я не вижу триггера onChange.

Сейчас у меня есть при изменении функция, которая принимает значение и использует его для фильтрации, поэтому мне нужно, чтобы эта функция запустилась.

Я мог бы поместить эту функцию в componentDidMount, но я хотелпрежде чем сделать это, убедитесь, что я ничего не пропустил, почему событие изменения не было запущено.

Answer 1

Если вы пытаетесь предотвратить обновление страницы, используйте эту встроенную функцию в вашем событии onSubmit (если я правильно понимаю ваш вопрос.)

event.preventDefault();

Он останавливает автоматическое обновление браузера!Обязательно вызовите событие в вашей функции.т.е.

onSubmit=(event)=>{
event.preventDefault();
//rest of code
}

Если вы пытаетесь фильтровать, метод es6 .filter полезен для флажков.Лично я использовал выпадающее меню выбора, чтобы отфильтровать параметры и выборочно показать отмеченные элементы в списке задач: «Готово», «Активно», «Завершено», и использовал эти состояния в моем методе фильтрации.

Answer 2

Попробуйте установить состояние в constructor() и componentDidUpdate().

Когда параметр URL добавляется к тому же маршруту, используется существующий компонент (то есть событие обновления) по сравнению с новымодин создается.В результате вы не увидите событие componentDidMount().

Другой вариант / решение заключается в непосредственном обновлении состояния isChecked и отправке изменения истории / URL.