Question

同时修改状态时出现错误。我有一个名为getAvailableSpace(i, newValue)的函数，该函数从后端获取数据并设置为状态。可以同时调用此函数。在最后一次调用结束之前调用它时会发生错误。

getAvailableSpace(i, newValue) {
    this.setState(() => {
        let schema_filters = _.cloneDeep(this.state.schema_filters);
        schema_filters[i].loadingSpaces = true;
        return {schema_filters: schema_filters}
    }, () => {
        this.invokeAPI("sitecomparsion", "getallspaces" + this.props.router.location.search + "&selectedTdid=" + newValue.value, requestHeaders.getHeader, (data) => {
            let schema_filters = _.cloneDeep(this.state.schema_filters);
            if(data) {
                //schema_filters[i].availableSpaces = {...data.spaces, ...data.areas}
                let spaces= (Object.keys(data.spaces).map((key) =>{
                    return {label: data.spaces[key], value: ('space_' + Number(key))}
                }))

                schema_filters[i].availableSpaces = [];
                schema_filters[i].availableSpaces.push({label: 'Spaces:', type: 'optgroup'})
                schema_filters[i].availableSpaces = schema_filters[i].availableSpaces.concat(areas)
            }
            this.setState((prevState) => {
                prevState.schema_filters = schema_filters;
                return prevState;
            });
        });
    });
}

我认为这个问题是由竞争状况引起的，因为两个调用都试图修改同一状态。

此外，我认为如果_.cloneDeep(this.state.schema_filters)发生在最后一次通话结束之前，那么从最后一次通话开始的更新将丢失。我可以帮忙吗？

Answer 1

如果您有很多状态要立即更新，请将它们全部归为一组。状态：

this.setState(() => {
   this.setState(() => {
        let schema_filters = _.cloneDeep(this.state.schema_filters);
        schema_filters[i].loadingSpaces = true;
        return {schema_filters: schema_filters}
    this.setState({schema_filters: schema_filters }, () => { 
    // Do something here. 
  });
});

反应并发修改相同状态

1 个答案: