Я пытаюсь подключить Primereact к моему django бэкэнд-проекту, использую restframework и corsheader для соединения обоих, но я продолжаю получать эту ошибку при попытке получить или передать данные.
Предупреждение: не удалось Тип реквизита: Реквизит addLead помечен как обязательный в LeadsForm, но его значение равно undefined. Uncaught TypeError: _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;