[英]Reactjs, error send data to post with axios
hi I am trying to post a form with email and password, but I have an error in the function that sends the data, that function you see in the image 嗨,我正在尝试使用电子邮件和密码发布表单,但是在发送数据的函数中有一个错误,您在图像中看到该函数
import axios from 'axios';
export const createUser =(usuariosBody, callback) => {
return function(dispatch){
dispatch({type: 'CREATE_USER_REQUEST'});
axios.post('http://localhost:8080/users', usuariosBody)
.then((response)=>{
dispatch({type: 'CREATE_USER_SUCCESS', payload:response.data})
if (typeof callback === 'function') {
callback(null, response.data);
}
})
}
}
component.jsx component.jsx
class LoginComponent extends Component{
constructor(props) {
super(props);
}
componentDidMount() {
}
render(){
return(
<section className="form-sign brown lighten-5">
<form onSubmit={this.handleSubmit.bind(this)}>
<input ref="email" placeholder='Email' />
<input type="password" ref="password" />
<Button type='submit' >send</Button>
</form>
</section>
)
}
handleSubmit(event) {
this.preventDefault();
const email = ReactDOM.findDOMNode(this.refs.email).value.trim();
const password = ReactDOM.findDOMNode(this.refs.password).value.trim();
// create a user object
const user = {
email,
password
};
// call the action
this.props.createUser(user, function (err, res) {
if (err) {
console.error(err);
} else {
console.log(res);
}
});
}
}
export default LoginComponent;
container.jsx container.jsx
import React, {Component} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {createUser} from '../action/action.js';
import {LoginComponent} from '../component/loginComponent.jsx';
class CreateUserContainer extends Component{
componentDidMount(){
}
render (){
return (<LoginComponent createUser={this.props.createUser} />);
}
}
function mapStateToProps(store) {
return {};
}
function mapDispatchToProps(dispatch){
return bindActionCreators({
createUser:CreateUser
}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(CreateUserContainer);
thanks for your help 谢谢你的帮助
您正在导入{CreateUser}
并尝试在container.jsx文件中使用{createUser}
。
You need to use mapDispatchToProps
instead of matchDispatchToProps
and also use CreateUser
in you mapDispatchToProps
function since you imported it as CreateUser 您需要使用
mapDispatchToProps
而不是matchDispatchToProps
并且还需要在mapDispatchToProps
函数中使用CreateUser
,因为您mapDispatchToProps
其导入为CreateUser
class CreateUserContainer extends Component{
constructor(props) {
super(props);
}
componentDidMount(){
}
render (){
return(
<LoginComponent createUser={this.props.createUser} />
)
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({
createUser:CreateUser
}, dispatch)
}
Also your class must implement the constructor to inherit the props 另外,您的类必须实现构造函数以继承道具
One more thing is that your handleSubmit function in LoginComponent is not bound 还有一件事是,LoginComponent中的handleSubmit函数未绑定
class LoginComponent extends Component{
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
You can also try and console.log(this.props)
in your LoginComponent
to see if it receives the createUser
function 您还可以尝试在
LoginComponent
console.log(this.props)
来查看它是否收到createUser
函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.