React mobx 找不到注入的 store

Question

我将点击事件绑定到复选框，这将调用商店中的操作函数。但是，当我点击复选框时，商店似乎没有被注入。

我在复选框上绑定点击事件。 CheckBox.tsx：

import * as React from 'react';

import { Checkbox, Stack } from '@fluentui/react';
import { inject, observer } from 'mobx-react';

import { PageStore } from '../Store/PageStore';

interface CheckBoxSexProps {
    pageStore?: PageStore
}

@inject("pageStore") @observer
export class CheckBoxSex extends React.Component<CheckBoxSexProps, {}> {

    // Used to add spacing between checkboxes
    private stackTokens = { childrenGap: 10 };
    private changeType: string = "female";

    public render() {
        console.log("CheckBoxSex render");
        console.log(this.props.pageStore);
        return (
            this.props.pageStore?.loadingStatus ?
                <Stack tokens={this.stackTokens}>
                    <Checkbox label="female" defaultChecked onChange={this.onChange("female")} />
                    <Checkbox label="male" defaultChecked onChange={this.onChange("male")} />
                </Stack>
                : null
        );
    }

    private onChange = (sexType: string) => {
        this.changeType = sexType;
        return this._onChange;
    }

    private _onChange(ev?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) {
        this.props.pageStore?.changeFilter(this.changeType, isChecked);
    }
}

并且商店已被导出。 PageStore.ts

import { action, computed, makeObservable, observable } from 'mobx';

export class PageStore {

    @observable public filter: Set<String> = new Set(["female", "male"]);

    constructor() {
        makeObservable(this);
    }

    @action
    public changeFilter(sex: string, actionType: boolean | undefined) {
        if (actionType) {
            this.filter.add(sex);
        } else {
            this.filter.delete(sex);
        }
        console.log(actionType)
    }
}

我在Canvas.tsx提供商店

import * as React from 'react';

import {Provider, observer} from 'mobx-react'

import { CheckBoxSex } from './CheckBox_Class';
import { DetailsInfo } from './DetailsInfo_Class';
import { PageStore } from '../Store/PageStore';

@observer
export class Canvas extends React.Component {

    private pageStore: PageStore;

    constructor(props: any) {
        super(props);
        this.pageStore = new PageStore(); 
         
    }

    public render() {
        console.log("Canvas render");
        return (
            this.pageStore?.loadingStatus === true ? 
                <Provider pageStore={this.pageStore}>
                    <div className="ms-Grid" dir="ltr">
                        <div className="ms-Grid-row">
                            <div className="ms-Grid-col ms-sm6 ms-md4 ms-lg3">
                                <DetailsInfo />
                            </div>
                            <div className="ms-Grid-col ms-sm6 ms-md8 ms-lg9">
                                <CheckBoxSex />
                            </div>
                        </div>
                    </div>
                </Provider>
                : null
        );
    }

}

问题是页面可以渲染，但是一旦我点击复选框就会报错：

TypeError: undefined is not an object (evalating 'this.props.pageStore') _onChange

Answer 1

你能试着把_onChange 做成一个箭头函数吗？我认为它失去了背景。像这样：

    private _onChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) => {
        this.props.pageStore?.changeFilter(this.changeType, isChecked);
    }