Javascript 为什么下面是抛出类型错误：分派不是一个函数？

Contxet.js文件如下：-

import React，{Component}来自“React”；
const Context=React.createContext（）；
const reducer=（状态、操作）=>{
开关（动作类型）{
案例“删除联系人”：
返回{
……国家，
联系人：state.contacts.filter(
contact=>contact.id！==action.payload
)
};
违约：
返回状态；
}
};
导出类提供程序扩展组件{
构造函数（）{
超级（）；
此.state={
联系人：[
{
id:1，
姓名：“第一人”，
电子邮件：“person1@gmail.com",
电话：“9999999999”
},
{
id:2，
姓名:"二人",，
电子邮件：“person2@gmail.com",
电话：“8888888888”
},
{
id:3，
姓名：“第三人”，
电子邮件：“person3@gmail.com",
电话：777777
}
],
disptach:action=>this.setState（state=>reducer（action，state））
};
}
render（）{
返回(
{this.props.children}
);
}
}
export const Consumer=Context.Consumer；

Contact.js文件如下：-

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
导入“/contact.css”；
从“./context”导入{Consumer}；
类接触扩展组件{
状态={
showContactInfo:false
};
onDeleteClick=（id，分派）=>{
分派（{type:“DELETE_CONTACT”，有效负载：id}）；
};
render（）{
const{id，name，email，phone}=this.props.contact；
const{showContactInfo}=this.state；
返回(
{value=>{
const{dispatch}=值；
返回(
{name}{”“}
这是我的国家({
showContactInfo:！this.state.showContactInfo
})
}
className=“fas fa排序”
样式={{光标：“指针”}
/>
{showContactInfo(

电子邮件：-{Email}
移动设备：{phone}

)：null}


);
}}
);
}
}
Contact.propTypes={
联系人：PropTypes.object.isRequired
};
导出默认联系人；

---

仅当执行删除操作时，它会提示分派不是功能。我刚刚开始学习React.js请朋友们如果可以的话，请告诉我这里缺少什么或者上面的代码有什么问题。我也曾尝试通过谷歌自己解决这个问题，但没有找到任何解决方法

您已将参数交换为

reducer（）

函数：

const reducer=（state，action）=>{

…

dispatch:action=>this.setState（state=>reducer（action，state））

，意思是当函数返回

action

时，它实际上返回的是状态。我编辑了它，但错误仍然是一样的

dispatch

不是

dispatch

谢谢您的时间，Bergi。我做对了，因为：）

import React, { Component } from "react";

const Context = React.createContext();
const reducer = (state, action) => {
  switch (action.type) {
    case "DELETE_CONTACT":
      return {
        ...state,
        contacts: state.contacts.filter(
          contact => contact.id !== action.payload
        )
      };
    default:
      return state;
  }
};

export class Provider extends Component {
  constructor() {
    super();
    this.state = {
      contacts: [
        {
          id: 1,
          name: "Person One",
          email: "person1@gmail.com",
          phone: "9999999999"
        },
        {
          id: 2,
          name: "Person Two",
          email: "person2@gmail.com",
          phone: "8888888888"
        },
        {
          id: 3,
          name: "Person 3",
          email: "person3@gmail.com",
          phone: "7777777777"
        }
      ],
      disptach: action => this.setState(state => reducer(action, state))
    };
  }

  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export const Consumer = Context.Consumer;

import React, { Component } from "react";
import PropTypes from "prop-types";
import "./contact.css";
import { Consumer } from "../context";

class Contact extends Component {
  state = {
    showContactInfo: false
  };

  onDeleteClick = (id, dispatch) => {
    dispatch({ type: "DELETE_CONTACT", payload: id });
  };

  render() {
    const { id, name, email, phone } = this.props.contact;
    const { showContactInfo } = this.state;

    return (
      <Consumer>
        {value => {
          const { dispatch } = value;
          return (
            <div className="card card-body mb-3">
              <h4>
                {name}{" "}
                <i
                  onClick={() =>
                    this.setState({
                      showContactInfo: !this.state.showContactInfo
                    })
                  }
                  className="fas fa-sort-down"
                  style={{ cursor: "pointer" }}
                />
                <i
                  className="fas fa-times"
                  style={{ cursor: "pointer", float: "right", color: "red" }}
                  onClick={this.onDeleteClick.bind(this, id, dispatch)}
                />
              </h4>
              {showContactInfo ? (
                <ul className="list-group">
                  <li className="list-group-item">Email :- {email}</li>
                  <li className="list-group-item">Mobile :- {phone}</li>
                </ul>
              ) : null}
              <br />
            </div>
          );
        }}
      </Consumer>
    );
  }
}

Contact.propTypes = {
  contact: PropTypes.object.isRequired
};

export default Contact;