Reactjs mapDispatchToProps之后未找到函数

大家好，天才们。我是一个新手，我想在这里实现一件非常简单的事情。 下面是代码，它尝试在单击按钮时调用函数

sentTheAlert（）

。但是，我的控制台中出现了错误

import React from 'react';
import { connect } from 'react-redux';
import { Button } from 'reactstrap';
import { RouteComponentProps } from 'react-router-dom';

export interface IFancyAlerterProps extends StateProps, DispatchProps, RouteComponentProps<{}> {}

export class FancyAlerter extends React.Component<IFancyAlerterProps> {
  handleSubmit= () => {
    this.props.sendTheAlert('hello');
  };

  render() {
    return (
      <div>
        <h1>Today Fancy Alert is {this.props.fancyInfo}</h1>
        <Button color="primary" onClick={this.handleSubmit}>
          See my Alert
        </Button>
      </div>
    );
  }
}

const SEND_MESSAGE = 'SEND_MESSAGE';

interface SendAlertType {
  type: typeof SEND_MESSAGE;
  payload: string;
}

function sendTheAlert(newMessage: string): SendAlertType {
  return {
    type: SEND_MESSAGE,
    payload: newMessage,
  };
}
const mapDispatchToProps = { sendTheAlert };

function mapStateToProps(state) {
  return { fancyInfo: 'Fancy this:' + state.currentFunnyString };
}

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

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

从“React”导入React；
从'react redux'导入{connect}；
从“reactstrap”导入{Button}；
从'react router dom'导入{RouteComponentProps}；
导出接口IFancyAlerterProps扩展了StateProps、DispatchProps、RouteComponentProps{}
导出类FancyAlerter扩展React.Component{
handleSubmit=（）=>{
this.props.sendTheAlert（'hello'）；
};
render（）{
返回(
今天的Fancy Alert是{this.props.fancyInfo}
看到我的警报了吗
);
}
}
const SEND_MESSAGE='SEND_MESSAGE'；
接口SendAlertType{
类型：发送消息的类型；
有效载荷：字符串；
}
函数sendTheAlert（newMessage:string）：SendAlertType{
返回{
类型：发送消息，
有效载荷：newMessage，
};
}
常量mapDispatchToProps={sendTheAlert}；
函数MapStateTops（状态）{
返回{fancyInfo:'fancyithis:'+state.currentFunnyString}；
}
类型StateProps=ReturnType；
类型DispatchProps=地图DispatchToProps的类型；
导出默认连接（MapStateTrops、mapDispatchToProps）（FancyAlerter）；

注意：如果这些信息有帮助，我将使用react UI创建一个Jhister应用程序。并尝试添加一个新组件（FancyAlerter）。所有旧组件都可以获得my函数，但新组件无法获得此函数或任何其他函数

所以，我只是不明白我相信的机制。任何帮助都将不胜感激

---

---

更新：在上面的代码中，props包含来自RouteComponentProps的方法，但不包含来自其他两种类型的方法

对于mapDispatchToProps使用对象似乎有问题。将mapDispatchToProps用作对象时，应提供操作创建者，而不是void函数：

const SEND_MESSAGE = 'SEND_MESSAGE'

interface SendAlertType {
  type: typeof SEND_MESSAGE
  payload: String
}

function sendTheAlert(newMessage: String): SendAlertType {
  return {
    type: SEND_MESSAGE,
    payload: newMessage
  }
}

const mapDispatchToProps = { sendTheAlert };

稍后，您可以对中间件（saga、thunk等）发出警报

检查用法：

---

测试您的代码：

感谢您调查此问题。我想出来了。当然，你所有的回答都帮我排除了可能的原因

似乎组件的导入方式对定义所有路由的react路由器文件有很大影响

据说下面是我的路线

<ErrorBoundaryRoute path="/fancy" component={FancyAlerter} />

而不是

import  { FancyAlerter }  from './modules/fancyalert/fancyalert';

---

我想你的答案在大多数情况下都是正确的，但是我无法让我的答案生效。。我正在使用打字脚本。调试时，我看到函数出现在mapDispatchToProps中。但是，它没有传递给我的类的props对象。@dharam您可以用不适合您的代码更新您的问题。给出的答案是正确的，几乎涵盖了您在原始问题中的错误。@HMR感谢您的关注。我根据Kerem的评论更新了代码。我仍然得到一个未定义的this.props.sendTheAlert-in-handleSumbit方法。如果这有帮助，代码将在tsx中编写file@dharam我没有测试代码，它可能有打字错误和bug。我刚刚更新了代码，删除了未定义的接口。@Kerematam没问题！我把丢失的零件插上电源。。我怀疑我的部件有问题。我还阅读了您提供的链接，这就是为什么我说您的答案对大多数情况都是正确的，令人惊讶的是，其他现有组件能够绑定这些操作。我编写的组件不是：）

import  { FancyAlerter }  from './modules/fancyalert/fancyalert';