Javascript 如何先更新子状态，然后更新父状态'；s州

简而言之：-

我想先更新子状态，然后再更新父状态，但我会批处理setState并调用父setState first和than childs。欲了解更多信息，请阅读下面的解释

基本上我有一个父组件，它有两个子组件

排序组件：-此组件打开一个下拉列表以选择排序选项。单击时，它应该更新本地状态，然后调用从父级作为道具传递的函数

产品集合：-此组件显示基于所选排序的产品

我将一个函数（

handleClick

）从父组件传递给sort，以将所选排序的值传递给父组件，然后将其传递给产品集合

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

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

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

但是，正如它所写的那样，批处理进程并首先调用父setState，然后调用子setState

例如，如果父级和子级都调用setState 在单击事件期间，子对象不会重新渲染两次。相反，要做出反应 “刷新”浏览器事件结束时状态更新。这 使大型应用程序的性能显著提高

我需要它以这种方式发生，只是因为我需要我的下拉列表先关闭，然后家长应该更新

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

使排序组件无状态并依赖于父级的道具，但这需要时间关闭下拉列表

使用setState的回调，但由于在文档中写入，它会首先批处理并调用父setState，然后调用childs

从中可以看出，您应该将

withRouter

-包装器提升到父级，让它计算出

selectedType

，并将其传递给排序组件。在

onHandleSort

中，您可以设置新的

查询

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);


从中可以看出，您应该将
withRouter
-包装器提升到父级，让它计算出
selectedType
，并将其传递给排序组件。在
onHandleSort
中，您可以设置新的
查询

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);


设置
selectedType
是否会导致下拉列表close@ShubhamKhatri是的，它关闭了下拉列表。你能展示一下这个部分吗code@ShubhamKhatri我正在使用reakit作为下拉列表，您可以在这里看到排序组件的代码，我认为您应该将
selectedType
保留在父级中。React强调自上而下的数据流模型，而您遇到的问题是由于试图违背它。设置
selectedType
是否会导致下拉列表close@ShubhamKhatri是的，它关闭了下拉列表。你能展示一下这个部分吗code@ShubhamKhatri我正在使用reakit作为下拉列表，您可以在这里看到排序组件的代码，我认为您应该保留在父项中选择类型
。React强调自上而下的数据流模型，您遇到的问题是由于试图违背它。感谢您的输入。我已经试过了，但在我的例子中，我需要一个本地状态，因为我想在用户点击后立即关闭下拉列表。所以，如果我通过道具，它不会在用户单击时立即关闭下拉列表。谢谢您的输入。我已经试过了，但在我的例子中，我需要一个本地状态，因为我想在用户点击后立即关闭下拉列表。所以，如果我通过道具，它不会在用户单击时立即关闭下拉列表。