setState 在函数的简单 if 条件中不起作用

Question

我正在尝试在 if 条件内的函数中设置状态，但你的值没有得到更新。

请在下面找到代码sn-p

archivePath = (filepath: string) => {
        if (filepath) {
            const breadcrumbs: any[] = [];
            var selectedgroup: string | undefined = "";
            let relPath: string = this.props.selectedGroup + "";
            breadcrumbs.push({ name: this.props.selectedGroup, path: relPath });
            const sliceCount = relPath.split("/").length;
            const pathMap = filepath.split("/").slice(sliceCount);
            if (pathMap.length > 0) {
                console.log("inside if of pathMap");
                selectedgroup = pathMap.pop();
                console.log("selectedgroup: ", selectedgroup);
                this.setState({
                    selectedFolder: selectedgroup
                }, () => {
                    console.log("selectedFolder in enterfolder: ", this.state.selectedFolder);
                });
            }
            else {
                this.setState({
                    selectedFolder: '',
                })
            }
            pathMap.map((baseName) => {
                console.log("baseName in enterfolder: ", baseName);
                relPath += ("/" + baseName);
                if (baseName === ".archive" || baseName.startsWith(".")) {
                    // this.setState({ isArchive: true });
                } else {
                    breadcrumbs.push({ name: baseName, path: relPath });
                }
            });
           

控制台日志为创建的选定组的局部变量打印正确的值，但 setState 没有更新状态值

Answer 1

正如@RaoVirinchi 提到的，可以将回调函数传递给this.setState 方法。

this.setState 以异步方式更新状态。因此，状态更新不会立即可见。因此，请保持如下，并在 render 方法中单独进行控制台日志，以确保它捕获正确的状态更新。

this.setState({
  selectedFolder: selectedgroup,
});

在组件渲染方法中包含控制台日志。然后它会在组件重新渲染状态更新时记录更新的状态。

console.log("selectedFolder in enterfolder: ", this.state.selectedFolder);