Javascript TypeError:使用react上下文api时，dispatch不是函数

我对反应非常陌生，目前正在使用上下文API，我试图从表单中的用户输入中获取国家名称，然后发送回上下文，在上下文中，我使用Componentdidmount调用API并显示数据，当用户输入时，其保存数据提醒它，但随后突然出现该错误

这是我的表格文件

import React, { useState } from 'react'
import { Consumer } from '../../context';
import Spinner from '../spinner';

function Country() {
    const [name, setName] = useState('');

    // 
    function Submit (e, dispatch){
        e.preventDefault();
        alert(`this form is submited ${name}`)

        dispatch({type: 'SELECT_COUNTRY', payload: name});

        setName('');
    }

    return (
        <Consumer>
            { value =>{
                if (!value.chart.length){
                    return <Spinner/>
                }
                else{
                    // setCountry(value.countries)
                    const { dispatch } = value;
                    console.log('coming from dispatch',dispatch)
                    return (
                        <div className='columns'>
                            <div className='column'>
                                <form onSubmit={Submit.bind(dispatch)}>
                                    <div className="field">
                                        <label className="label">Pick your Country</label>
                                        <div className="control has-icons-left has-icons-right">
                                            <input className="input" type="text" placeholder="Enter Country name..." value={name} onChange={e => setName(e.target.value)}/>
                                            <span className="icon is-small is-left">
                                                <i className="fas fa-globe-asia"></i>
                                            </span>
                                            <span className="icon is-small is-right">
                                                <i className="fas fa-check"></i>
                                            </span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    );**strong text**
                }
            }}
        </Consumer>
    )
}


export default Country;

import React，{useState}来自“React”
从“../../context”导入{Consumer}；
从“../Spinner”导入微调器；
职能国家（）{
const[name，setName]=useState（“”）；
// 
功能提交（e，调度）{
e、 预防默认值（）；
警报（`此表单已提交${name}`）
分派（{type:'SELECT_COUNTRY'，有效负载：name}）；
集合名（“”）；
}
返回(
{value=>{
如果（！value.chart.length）{
返回
}
否则{
//setCountry（value.countries）
const{dispatch}=值；
console.log（'来自调度'，调度）
返回(
选择你的国家
setName（e.target.value）}/>
)强文本**
}
}}
)
}
出口违约国；

这是我的上下文文件

import React, { Component } from 'react';
import axios from "axios";
import Country from './components/country/country';

const Context = React.createContext();

const reducer = (state, action) => {
    switch(action.type) {
        case 'SELECT_COUNTRY':
            return {
                ...state,
                cont:action.payload
            };
        default:
            return state;
    }
}

export class Provider extends Component {

    state = {
        data : {},
        chart : {},
        countries : {},
        cont: '',
        dispatch : action => this.setState(state =>
            reducer(state,action))
    }
    componentDidMount(){
        axios.get('https://covid19.mathdro.id/api')
            .then(res => {
                // console.log(res.data)
                this.setState({ data : res.data});
            })
            .catch(err => console.log(err))

        axios.get('https://covid19.mathdro.id/api/daily')
        .then(res => {
            const result = res.data.map(({ confirmed, deaths, reportDate: date }) => ({ confirmed: confirmed.total, deaths: deaths.total, date }));
            this.setState({ chart : result});
        })
        .catch(err => console.log(err))

        axios.get('https://covid19.mathdro.id/api/countries')
        .then(res => {
            console.log('yeh country ka res h', res.data.countries)
            const { countries } = res.data;
            // console.log('yesh country ka destructuring h',countries)

            this.setState({ countries : countries.map( country => country.name)});
        })
        .catch(err => console.log(err))

    }

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

export const Consumer = Context.Consumer;

import React，{Component}来自'React'；
从“axios”导入axios；
从“./部件/国家/国家”进口的国家；
const Context=React.createContext（）；
const reducer=（状态、操作）=>{
开关（动作类型）{
案例“选择国家”：
返回{
……国家，
cont:action.payload
};
违约：
返回状态；
}
}
导出类提供程序扩展组件{
状态={
数据：{}，
图表：{}，
国家：{}，
续：''，
dispatch:action=>this.setState（state=>
减速器（状态、动作））
}
componentDidMount（）{
axios.get（）https://covid19.mathdro.id/api')
。然后（res=>{
//console.log（res.data）
this.setState（{data:res.data}）；
})
.catch（err=>console.log（err））
axios.get（）https://covid19.mathdro.id/api/daily')
。然后（res=>{
const result=res.data.map（{已确认，死亡，报告日期：}）=>（{已确认：已确认。总计，死亡：死亡。总计，日期}））；
this.setState（{chart:result}）；
})
.catch（err=>console.log（err））
axios.get（）https://covid19.mathdro.id/api/countries')
。然后（res=>{
console.log（'yeh country ka resh'，res.data.countries）
const{countries}=资源数据；
//console.log（'yesh country ka destructuring h'，countries）
this.setState（{countries:countries.map（country=>country.name）}）；
})
.catch（err=>console.log（err））
}
render（）{
返回(
{this.props.children}
)
}
}
export const Consumer=Context.Consumer；

您没有正确调用提交函数，请尝试以下操作：

form onSubmit={(e)=>Submit(e,dispatch)}

---

您可以执行

formonsubmit={（e）=>Submit（e，dispatch）}