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

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

0 голосов
/ 22 февраля 2019

Короче говоря: -

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

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

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

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

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

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 22 февраля 2019

Судя по вашей кодовой ручке , вы должны поднять withRouter -обёртку до родителя, дать ему вычислить 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 (
      // ...
    );
  }
}
...