Javascript TypeError:\u this.props.addLead不是函数

Javascript TypeError:\u this.props.addLead不是函数,javascript,reactjs,redux,primereact,Javascript,Reactjs,Redux,Primereact,我试图将Primereact连接到我的django后端项目,使用restframework和corsheader连接这两个项目,但在尝试获取或传递数据时,我一直遇到此错误 警告:失败的道具类型:道具addLead在LeadsForm中标记为必需,但其值是未定义的。未捕获类型错误:\ u this.props.addLead不是函数LeadsForm.js:24 我的动作文件 import axios from 'axios'; import { GET_LEAD

我试图将Primereact连接到我的django后端项目,使用restframework和corsheader连接这两个项目,但在尝试获取或传递数据时,我一直遇到此错误

警告:失败的道具类型:道具
addLead
LeadsForm
中标记为必需,但其值是
未定义的
。未捕获类型错误:\ u this.props.addLead不是函数LeadsForm.js:24

我的动作文件

        import axios from 'axios';

        import { GET_LEADS, ADD_LEAD } from './types'


        export const getLeads = () => dispatch => {
            axios`enter code here`
            .get("http://127.0.0.1:8000/api/leads/")
            .then(res => {
                dispatch({
                    type: GET_LEADS,
                    payload: res.data
                });
            }).catch(err => console.log(err));
        };

        // ADD LEADS
        export const addLead = lead => dispatch => {
            axios
            .post("http://127.0.0.1:8000/api/leads/", lead)
            .then(res => {
                dispatch({
                    type: ADD_LEAD,
                    payload: res.data
                });
            }).catch(err => console.log(err));
        }
LeadsForm文件

    import React, { Component } from 'react'
    import { connect } from 'react-redux';
    import PropTypes from 'prop-types';
    import { addLead } from '../actions/leads';
    import {InputTextarea} from 'primereact/inputtextarea';
    import {InputText} from 'primereact/inputtext';
    import { Button } from 'primereact/button';

    export class LeadsForm extends Component {
        state = {
            name: '',
            email: '',
            message: ''
        };
        static propTypes = {
          addLead: PropTypes.func.isRequired
        };
      onChange = e => this.setState({ [e.target.name]: e.target.value});

      onSubmit = e => {
          e.preventDefault();
          const { name, email, message } = this.state;
          const lead = { name, email, message };
          this.props.addLead(lead);
          this.setState({
            name: "",
            email: "",
            message: ""
          });

        };

        // onSubmit = e => {
        //   this.setState({
        //     name: "",
        //     email: "",
        //     message: ""
        //   });
        // };
        render() {
            const { name, email, message } = this.state;
            return (
                <div className="card card-w-title">
                <div className="p-grid ">
                   <h2>Add Lead</h2>
                   <form onSubmit={this.onSubmit}>
                     <div className="p-col-12">
                        <span className="p-float-label">
                          <InputText id="in"
                          name="name" 
                          value={name} 
                          onChange={this.onChange} size={50} />
                          <label htmlFor="in">Name</label>
                        </span>
                        </div>
                        <div className="p-col-12">
                        <span className="p-float-label">
                          <InputText id="in"
                          name="email" 
                          value={email} 
                          onChange={this.onChange} size={50}/>
                          <label htmlFor="in">Email</label>
                        </span>
                        </div>
                        <div className="p-col-12">
                        <span className="p-float-label">
                        <InputTextarea id="in" size={50} rows={5} cols={30}
                          name="message" 
                          value={message} 
                          onChange={this.onChange} />
                          <label htmlFor="in">Message</label>
                        </span>
                        </div>


                <Button type = "submit" value="Submit" label="Save" style={{marginBottom:'10px'}} className="p-button-raised" />
                {/* <button type="submit" className="btn btn-primary">
                  Submit
                </button> */}

                   </form>
               </div>
               </div>
            )
        }
    }

    // LeadsForm.propTypes= {
    //   addLead: PropTypes.func
    // }

    export default connect(null, { addLead })(LeadsForm);

    reducer/leads.js

    import { GET_LEADS, ADD_LEAD } from '../actions/types';

    const initialState = {
        leads: []
    }

    export default function (state = initialState, action){
    switch(action.type){
        case GET_LEADS:
          return {
            ...state,
            leads: action.payload
          };
        case ADD_LEAD:
          return {
            ...state,
            leads: [...state.leads, action.payload]
          }
        default:
            return state;
        }
    }
    '
    reducer/index.js

   ' import { combineReducers } from 'redux';
    import leads from './leads';
    export default combineReducers({
        leads
    });

您正在对
LeadsForm
组件执行命名导出(
导出类…
)和默认导出(
导出默认…
)。默认导出将由
connect
包装,您的操作添加到
props
,命名导出不会由
connect
包装,使您的操作
未定义

如果未通过
connect
连接组件就无法工作,您可能应该删除命名导出以减少混淆

确认您正在导入
LeadsForm
作为默认导入。这很可能是您的问题。

请console.log(This.props.addLead)。所以你可能知道它有什么!
    import { createStore, applyMiddleware} from 'redux';
    import { composeWithDevTools} from 'redux-devtools-extension';
    import thunk from 'redux-thunk';
    import rootReducer from './reducers';

    const initialState = {};

    const middleware = [thunk];

    const store = createStore(
       rootReducer,
       initialState,
       composeWithDevTools(applyMiddleware(...middleware))
    );
    export default store;