如何先更新子状态，然后再更新父状态

Question

简而言之：-

我想先更新子状态，然后更新父状态，但反应批次 setSate 并首先调用父 setState，然后再调用子状态。要获得更多理解，请阅读下面的说明。

基本上我有一个父组件有两个孩子。

1. 排序组件：- 该组件打开一个下拉列表供选择排序选项。点击它应该更新本地状态，然后调用从父级作为道具传递的函数。
2. 产品集合：-此组件根据所选排序显示产品。

我正在将一个函数 (handleClick) 从父组件传递给排序，以将所选排序的值传递给父组件，然后将其传递给产品集合。

由于排序是一个下拉列表，我想在用户选择一个选项后立即关闭它，然后我想更新父项。

现在我正在以这种方式使用它，首先更新本地状态并在回调中调用从父级传递的函数。

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

但正如React docs 中所写，它对进程进行批处理并首先调用父 setState，然后再调用子。

例如，如果 Parent 和 Child 都调用 setState 在点击事件期间，Child 不会重新渲染两次。相反，反应 在浏览器事件结束时“刷新”状态更新。这个 显着提升大型应用的性能。

我需要它以这种方式发生，只是因为我需要先关闭我的下拉菜单，然后父级应该更新。

我尝试了以下方法，但似乎没有任何效果。

1. 使排序组件无状态并依赖于父级的道具，但这需要时间来关闭下拉列表。
2. 使用了 setState 的回调，但由于在文档中写入，它首先批处理和调用父 setState，然后再调用子。

Answer 1

从your 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 (
      // ...
    );
  }
}