Как обновить сначала дочернее состояние, а затем состояние родителя

Вкратце: -

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

В основном у меня есть родительский компонент, у которого есть два ребенка.

  1. Компонент сортировки: - этот компонент открывает раскрывающееся меню для выбора параметров сортировки. при щелчке он должен обновить локальное состояние, а затем вызвать функцию, переданную как реквизиты от родителя.
  2. Коллекция продуктов: - Этот компонент отображает продукты в зависимости от выбранной сортировки.

Я передаю функцию (handleClick) из родительского компонента для сортировки, чтобы получить значение выбранной сортировки в родительский компонент, а затем передать его в коллекцию продуктов.

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

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

handleClick(param) {
    this.setState({ selectedType: param.slug }, () =>
      this.props.onHandleSort(param.slug)
    )
  }

Но как написано в React docs < / a> он группирует процесс и сначала вызывает родительский setState, а затем дочерний.

Например, если и Parent, и Child вызывают setState во время события клика, Child не будет повторно визуализироваться дважды. Вместо этого React «сбрасывает» обновления состояния в конце события браузера. Это приводит к значительному повышению производительности в более крупных приложениях.

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

Я пробовал следующее, но, похоже, ничего не работает.

  1. Компонент сортировки теперь не имеет состояния и зависит от свойств родительского элемента, но для закрытия раскрывающегося списка потребуется время.
  2. Используется обратный вызов setState, но поскольку, как написано в документах, он сначала группирует и вызывает родительский setState, а затем дочерние элементы.

reactjs javascript setstate
person Code Maniac    schedule 22.02.2019    source источник
comment
При установке selectedType раскрывающийся список закрывается   -  person Shubham Khatri    schedule 22.02.2019
comment
@ShubhamKhatri да, он закрывает раскрывающийся список.   -  person Code Maniac    schedule 22.02.2019
comment
Можете ли вы показать эту часть кода   -  person Shubham Khatri    schedule 22.02.2019
comment
@ShubhamKhatri Я использую reakit для раскрывающегося списка, и вы можете увидеть здесь код для компонента сортировки codepen. io / anon / pen / zeRqyz? editors = 0010   -  person Code Maniac    schedule 22.02.2019
comment
Я думаю, вам следует просто оставить selectedType в родительском элементе. React делает упор на нисходящую модель потока данных, и проблемы, с которыми вы сталкиваетесь, возникают из-за попыток пойти против нее.   -  person Keno Clayton    schedule 22.02.2019
comment
@KenoClayton да, я тоже пробовал эту часть, но здесь мое требование таково, что мне нужно сохранить локальное состояние, чтобы закрывать раскрывающийся список, как только пользователь нажимает на него.   -  person Code Maniac    schedule 22.02.2019
comment
Кроме того, если вы делаете это только для того, чтобы закрыть раскрывающийся список, почему бы просто не использовать какой-нибудь обходной путь на основе стиля, чтобы скрыть элемент (анимировать его, если хотите), и onAnimationEnd, возможно, скрыть компонент или изменить состояние.   -  person Keno Clayton    schedule 22.02.2019
comment
Например, вы можете использовать handleClick, чтобы установить флаг, чтобы скрыть элемент. В элементе вы добавляете этот класс, если ваш флаг истинен, а также добавляете слушателя анимации / переходов, который запускает состояние в родительском элементе. Вы также можете изучить возможность использования библиотеки, созданной для таких типов переходов, например, React Spring react -spring.io/docs/hooks/use-transition   -  person Keno Clayton    schedule 22.02.2019
comment
@KenoClayton здесь, в сортировке, у меня есть поле, в котором я должен показать выбранный фильтр. дело не только в закрытии выпадающего сопряжения. извините, если я не достаточно ясно ответил на свой вопрос   -  person Code Maniac    schedule 22.02.2019

Ответы (1)


arrow_upward
2
arrow_downward

Судя по вашему codepen, вы должны поднять withRouter-wrapper до родительского , пусть он определит selectedType и передаст его вашему компоненту сортировки. Затем в вашем onHandleSort вы можете установить новый query.

class Parent extends Component {
  // ...
  handleClick (slug) => {
    this.props.router.push({ query: { sorting: slug } })
  }
  // ...
  render () {
    const sorting = this.props.router && this.props.router.query
      ? this.props.router.query.sorting
      : 'RELEVANCE';

    return (
      // ...
      <Sort value={sorting} onHandleSort={this.handleClick} />
      // ...
    );
  }
}

export default withRouter(Parent);


export default class Sort extends Component {
  // ...
  handleClick (param) => {
    this.props.onHandleSort(param.slug)
  }
  // ...
  render () {
    const selectedType = this.props.sorting;

    return (
      // ...
    );
  }
}
person Lorenz Henk    schedule 22.02.2019
comment
Спасибо за ваш вклад. Я уже пробовал это, но в моем случае мне нужно локальное состояние, так как я хочу закрыть раскрывающийся список, как только пользователь щелкнет. поэтому, если я сделаю это через реквизит, он не закроет раскрывающийся список, как только пользователь щелкнет. - person Code Maniac; 22.02.2019