Question

简而言之：-

我想先更新子状态，而不要更新父状态，但要对批处理setSate作出反应，并首先要比孩子调用父setState。为了获得更多的理解，请阅读下面的说明。

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

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

我要从父级组件传递一个函数（ handleClick ）进行排序，以将选定的sort的值传递给父级，然后将其传递给产品集合。

由于排序是一个下拉菜单，我想在用户选择一个选项后立即将其关闭，然后我要更新父项。

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

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

但是按照React docs的描述，它会批量处理该进程，并首先调用父setState，而不是调用子setState。

例如，如果父级和子级都调用setState 在点击事件中，“儿童”不会重新渲染两次。相反，React 在浏览器事件结束时“刷新”状态更新。这个可以显着提高大型应用程序的性能。

我之所以需要这种方式，仅仅是因为我需要首先关闭下拉菜单，然后父级才能更新。

我已经尝试了以下方法，但似乎无济于事。

使排序组件变为无状态，并依赖于父级的道具，但这将需要一些时间来关闭下拉列表。
使用了setState的回调函数，但由于如文档中所写，它首先批处理并调用父setState而不是子方法。

Answer 1

从your codepen开始，您应该将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 (
      // ...
    );
  }
}

如何先更新子状态，而不是更新父状态

1 个答案: