Question

我正在使用带有Typescript的React-Redux，并试图访问mapDispatchToProps中定义的函数，但是我遇到以下错误：

未捕获的TypeError：this.props.getStoreList不是一个函数在t.componentDidMount

涉及的两个文件是container.tsx和mapper.ts。我已经尝试将mapper.ts的内容放到container.tsx中，以防导入出现问题，但是并不能解决错误。

该场景与之前的stackoverflow问题非常相似：mapDispatchToProps is not putting my function into props，但是该解决方案似乎不适用于我的情况。

container.tsx

import * as React from 'react';
import { connect } from "react-redux";
import { mapStateToProps, mapDispatchToProps } from "./mapper";
import { IStoreListComponentProps } from './component';

export interface IStoreListContainerProps extends IStoreListComponentProps {
    fetchStoreList?: () => void;
}

export class StoreListContainer extends React.Component<IStoreListContainerProps> {
    componentDidMount() {
        this.props.fetchStoreList();
    }

    render() {
        return <div>Example</div>;
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(StoreListContainer);

mapper.ts

import { fetchStoreList } from "./actions/fetch-store-list";
import { IState } from "../../features/store/model";

export const mapDispatchToProps = (dispatch: any) => {
    return {
        getStoreList: () => { dispatch(fetchStoreList()); },
    };
};

export const mapStateToProps = (state: IState) => {
    return {
        storeList: state.storeList
    };
};

感谢您的帮助！

Answer 1

export const mapDispatchToProps = (dispatch: any) => {
    return {
        getStoreList: () => dispatch(fetchStoreList()),
    };
};

尝试以这种方式编写

mapDispatchToProps未将功能连接到道具

1 个答案: