React Mobx @inject注入store后点击复选框找不到store如何解决

核心问题根因 #

• 触发报错的直接原因是 _onChange 方法的 this 指向丢失：你定义的 _onChange 是普通类方法，没有绑定组件实例上下文，当它作为复选框的事件回调被触发时，内部的 this 指向为 undefined，自然无法读取 this.props.pageStore。
• 额外隐藏问题1：你在 PageStore 类中没有定义 loadingStatus 可观察属性，目前代码中 loadingStatus 值始终为 undefined，会导致 Provider 及子组件判断条件不成立，无法正常渲染。
• 额外隐藏问题2：Canvas 组件中的 pageStore 是普通实例属性，如果你后续要通过修改 loadingStatus 控制组件渲染，pageStore 内部可观察属性的变更无法触发 Canvas 重渲染。

修复步骤 #

1. 修复 _onChange 的 this 指向，将其改为箭头函数即可：

// CheckBox.tsx 中修改 _onChange 定义
private _onChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) => {
    this.props.pageStore?.changeFilter(this.changeType, isChecked);
}

2. 给 PageStore 补上缺失的 loadingStatus 可观察属性，可根据你的业务逻辑调整初始值：

// PageStore.ts 中新增属性
@observable public loadingStatus: boolean = true;

3. （可选，如果需要通过 loadingStatus 控制根节点渲染）将 Canvas 中的 pageStore 放到 state 中，确保可观察属性变更能触发重渲染：

// Canvas.tsx 中修改 constructor
constructor(props: any) {
    super(props);
    this.state = {
        pageStore: new PageStore()
    };
}

// render 中改成读取 this.state.pageStore
public render() {
    console.log("Canvas render");
    return (
        this.state.pageStore?.loadingStatus === true ? 
            <Provider pageStore={this.state.pageStore}>
                {/* 原有DOM结构不变 */}
            </Provider>
            : null
    );
}

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