组件上的React Redux调度->属性不存在

Question

我正在使用React Redux进行我的第一个项目，当我尝试在componentDidMount部分中分派函数时，遇到了一些问题。我试图在文档中遵循Reddit API示例项目，但由于它们使用JavaScript，我使用的是TypeScript，所以并非所有内容都是一样的。

这是我试图实现这一点的React组件：

export class EducationComponent extends Component {
    constructor(props: any) {
        super(props);
    }

    componentDidMount() {
        const { dispatch, getUser } = this.props;
        dispatch(getUser());
    }
    public render() {
        return (
            <Content className="component">
                <Demo/>
            </Content>
        );
    }
}

function mapStateToProps(state: State) {
    const { isLoaded, isFetching, user } = state.userProfile;
    return {
        user,
        isFetching,
        isLoaded
    }
}

export default connect(mapStateToProps)(EducationComponent)
export const Education = (EducationComponent);

我在const{调度， getUser}=this.props；行中收到以下错误：

Error:(16, 17) TS2339: Property 'dispatch' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Error:(16, 27) TS2339: Property 'getUser' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

如果存在任何不确定性，可在此处找到该项目：https://github.com/jLemmings/GoCVFrontend

这是正确的方法还是有更好的选择？

谢谢

使用当前状态编辑：

const {Content} = Layout;

export class EducationComponent extends Component {
    constructor(props: any) {
        super(props);
    }

    componentDidMount() {
        this.props.userAction();
    }
    public render() {
        return (
            <Content className="component">
                <Demo/>
            </Content>
        );
    }
}

const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
    userAction: action.getUser,
}, dispatch);

function mapStateToProps(state: State) {
    const { isLoaded, isFetching, user } = state.userProfile;
    return {
        user,
        isFetching,
        isLoaded
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(EducationComponent)

最终编辑（成功）：

interface MyProps {
    getUser: () => void
}

interface MyState {
    userAction: ThunkAction<Promise<void>, {}, {}, AnyAction>
}

export class EducationComponent extends Component<MyProps, MyState> {
    static defaultProps = {getUser: undefined};

    constructor(props: any) {
        super(props);
    }

    componentDidMount() {
        this.props.getUser()
    }

    public render() {
        return (
            <Content className="component">
                <Demo/>
            </Content>
        );
    }

}

const mapDispatchToProps = (dispatch: ThunkDispatch<{}, {}, any>, ownProps: MyProps) => {
    return {
        getUser: () => {
            dispatch(getUser());
        }
    }
}

function mapStateToProps(state: State) {
    const {isLoaded, isFetching, user} = state.userProfile;
    return {
        user,
        isFetching,
        isLoaded
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(EducationComponent)

Answer 1

您是否使用mapDispatchToProps绑定调度方法？

Answer 2

你可以这样做

componentDidMount() {
   this.props.getUser();
}

// mapStateToProps

mapDispatchToProps = (state) => {
   getUser: () => dispatch(getUser()); //Don't forget to import getUser from your action creator
}

export default connect(mapStateToProps, mapDispatchToProps)(EducationComponent)
export const Education = (EducationComponent); // Delete this line no need for this because you're already exporting it as default

参考：https://react-redux.js.org/using-react-redux/connect-mapdispatch#arguments

Answer 3

查看项目后，您将像这样导入组件：

import {Education} from "../pages/Public/Education";

这将导入未连接的组件，这就是您无法访问dispatch的原因。

您应该导入默认连接的组件：

import Education from "../pages/Public/Education";