React mobx 找不到注入的商店

问题描述

我给checkBox绑定了一个click事件，它会调用store中的action函数。但是，当我单击复选框时，似乎没有注入商店。

我将点击事件绑定在复选框上。 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 不是一个对象（评估 'this.props.pageStore'） _onChange

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）