React - 儿童访问父母状态太早？

Question

当使用从子元素到 app.js 的回调时，app.js 中的回调函数会设置元素的状态。 在同一个子函数中，在下一行，函数访问这个状态，它作为一个 prop 传递。 有没有办法确保下一行已经以更新的状态执行？ 如果没有，什么是更好的实现方式？

子组件

function handleCountrySelected(selected) {
    let selectedValues = {
      countries: selected,
      planningGroups: null,
    };


    onFilterChange(selectedValues); // changes selectedFilters.country via callback

    console.log(selectedFilters.countries); // still old state. selectedFilters is a prop from apps.state. Here it is still showing the old value
    filters_changed();
    autoApply && applyFilter(); // applyFilter fails because its accessing old state, still.
}

应用程序.js

updateSelectedFilters(selectedValues) {
    this.setState({
      selectedFilters: {
        ...this.state.selectedFilters,
        ...selectedValues
      }
    }

...

<NavbarTopFilters onApplyFilters={this.onApplyFilters}
                              selectedFilters={this.state.selectedFilters}
                              onFilterChange={this.updateSelectedFilters}
/>

Answer 1

setState是一个异步函数。 您需要将其余的行作为回调传递。

function updateSelectedFilters(selectedValues, callback) {
    this.setState({selectedFilters: {...}}, callback);
    ...
}

onFilterChange(selectedValues, () => { console.log(...) });