reactjs - React：状态是在 api 调用之后设置的，而不是之前

Question

Id我有网格组件，我有按列过滤的过滤器。当我在其中写入内容时，此代码将触发。

filterChange(event) {
    debugger;
    const test = event.filter.filters[0];
    const column = test.field;
    const value = test.value;

    this.setState(prevState => ({
        ...prevState,
        filter: {
            ...prevState.filter,
            query: {
                ...prevState.filter.query, 
                filter: {
                    ...prevState.filter.query.filter,
                    JobId: value
                }
            }
        }
    }))
    console.log("before");
    console.log(this.state.filter.query);
    // api call to get new data
    this.props.getAllProcesses(this.state.filter);
}

我的状态对象如下所示

    this.state = {
        filter:{
            pageable: this.state ? this.state.pageable : {
                buttonCount: 5,
                info: true,
                type: 'numeric',
                pageSizes: true,
                previousNext: true
            },
            pagingOptions:{
                pageSize: 5,
                skip: 0
            },
            query:{
                collectionName: "",
                filter: {},
                sort: {},
                projection: {},
                take: 0,
                skip: 0,
                includeTotalCount: true,
                context: null,
            }           
        }
    };

当状态改变时，过滤器query object仍然有旧数据并this.props.getAllProcesses(this.state.filter)从 api 获取错误数据，因为query filter仍然是空的

当我检查生命周期query filter时componentDidUpdate，状态设置正确。

componentDidUpdate(prevProps, prevState) {
    console.log("after");
    console.log(this.state.filter.query);
}

state所以我的问题是，在我正确设置后，我必须如何或何时调用我的 api ？

标签： reactjs