React类组件正常使用却触发Can't call setState未挂载警告排查

警告的核心触发逻辑是你在组件未完成挂载时就执行了setState：

1. constructor是组件初始化阶段执行的函数，此时组件还未挂载到DOM树，componentDidMount生命周期钩子尚未触发
2. 你在constructor中直接调用了异步请求方法loadImagesWithTags，如果请求响应速度足够快（比如本地开发环境的Mock接口、网络状况极好），then回调会在组件挂载完成前执行，回调中的setState就会触发该警告
3. 之前相同写法未触发警告的原因大概率是之前的请求响应耗时普遍长于组件挂载的耗时，回调执行时组件已经完成挂载；或是你当前升级了React版本，新版本在开发环境新增了更严格的非法setState校验逻辑

第一步：调整异步请求的调用时机 #

移除constructor中的this.loadImagesWithTags()调用，将其移到组件挂载完成后才触发的componentDidMount钩子中。

第二步：增加组件挂载状态判断（可选但推荐） #

增加挂载状态标记，避免组件卸载后异步请求返回仍然执行setState导致的内存泄漏问题。

修改后的完整代码参考：

export default class ImageTableItemComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data : [],
            collapsible : false,
        }
    }

    componentDidMount() {
        // 标记组件已挂载
        this._isMounted = true;
        // 组件挂载完成后再发起异步请求
        this.loadImagesWithTags();
    }

    componentWillUnmount() {
        // 组件卸载时标记为未挂载
        this._isMounted = false;
    }

    loadImagesWithTags() {
        const imagesAndTags = new ImagesAndTags();
        imagesAndTags.getImagesWithTags()
            .then(imagesAndTags => {
                // 仅组件已挂载时才执行setState
                if (!this._isMounted) return;
                const data = this.convertDataToObject(imagesAndTags)
                this.setState({data: data})
            })
            .catch(reason => {
                console.error('Error loading tags:', reason)
            });
    }

    // 其余原有逻辑保持不变
}

内容的提问来源于stack exchange，提问作者TraktorJack