TypeError:_this.props.addLead不是函数

Question

我正试图将Primreact连接到我的django后端项目，使用restframework和corshead来连接两者，但在尝试获取或传递数据时，我一直遇到这个错误。

警告：失败的道具类型：道具addLead在LeadsForm中标记为必需，但其值为undefined。未捕获类型错误：_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
});

store.js

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;   

Answer 1

您正在执行LeadsForm组件的命名导出(export class ...(和默认导出(export default ...(。默认导出将由connect包装，并将您的操作添加到props，命名导出将不会由connect包装，使您的操作成为undefined。

如果组件不通过connect就无法工作，则可能应该删除命名导出以减少混淆。

验证是否将LeadsForm作为默认导入进行导入。这很可能是你的问题。