Javascript Reactjs，使用axios向post发送数据时出错

您好，我正试图发布一个带有电子邮件和密码的表单，但是我在发送数据的函数中有一个错误，您在图片中看到的函数

action.js

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

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;

class LoginComponent扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
}
render（）{
返回(
发送
)
}
handleSubmit（事件）{
这个.preventDefault（）；
const email=ReactDOM.findDOMNode（this.refs.email）.value.trim（）；
const password=ReactDOM.findDOMNode（this.refs.password）.value.trim（）；
//创建用户对象
常量用户={
电子邮件，
密码
};
//行动起来
this.props.createUser（用户，函数（err，res）{
如果（错误）{
控制台错误（err）；
}否则{
控制台日志（res）；
}
});
}
}
导出默认登录组件；

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);

import React，{Component}来自'React'；
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
从“../action/action.js”导入{createUser}；
从“../component/LoginComponent.jsx”导入{LoginComponent}；
类CreateUserContainer扩展组件{
componentDidMount（）{
}
渲染（）{
返回（）；
}
}
函数MapStateTops（存储）{
返回{}；
}
功能图DispatchToprops（调度）{
返回bindActionCreators({
createUser:createUser
}，调度）
}
导出默认连接（mapStateToProps、mapDispatchToProps）（CreateUserContainer）；

---

感谢您的帮助

您正在导入

{CreateUser}

并尝试在container.jsx文件中使用

{CreateUser}

。

您正在导入

{CreateUser}

并尝试使用

{CreateUser}

在container.jsx文件中。

您需要使用

mapDispatchToProps

而不是

matchDispatchToProps

，并且 在

mapDispatchToProps

函数中使用

CreateUser

，因为您将其作为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)
}

---

您还可以尝试在您的

LoginComponent

中使用

console.log（this.props）

，查看它是否接收到

createUser

函数

您需要使用

mapDispatchToProps

而不是

matchDispatchToProps

，并且 在

mapDispatchToProps

函数中使用

CreateUser

，因为您将其作为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)
}

---

---

您也可以尝试在您的

LoginComponent

中使用

console.log（this.props）

，查看它是否接收到

createUser

函数

谢谢您的回答，但是我更改了它，但它不起作用。您可以检查

handleSubmit

函数中的

this

是什么吗？（使用console.log）并检查

props

show:LoginComponent{props:Object，context:Object，refs:Object，updater:Object，_reactInternalInstance:ReactCompositeComponentWrapper…}确保此行

函数mapDispatchToProps（dispatch）{return bindActionCreators({createUser:createUser}，dispatch）}

与

createUser

一起（小写-应为

createUser:createUser

）文件名是action.js？您正在导入createUser.js。请确保文件名正确谢谢您的回答，但我更改了它，但它不起作用。您可以在

handleSubmit

函数中检查

这是什么吗？（使用console.log）并检查
props
show:LoginComponent中是否有任何属性{props:Object，context:Object，refs:Object，updater:Object，{u reactInternalInstance:ReactCompositeComponentWrapper…}确保此行
函数mapDispatchToProps（dispatch）{return bindActionCreators（{createUser:createUser}，dispatch）}
与
createUser
一起（小写-应为
createUser:createUser
）文件名是action.js？您正在导入createUser.js。请确保文件名正确。我更改了文件名，但是同一个错误。我在编辑您的问题以确保可读性，我注意到您错过了formo的结束标记。是的，我已修复，但它没有工作。我更改了文件名，但是同一个错误。我在编辑您的问题以确保可读性，我注意到您错过了formo的结束标记是的，我修复了它，但它不起作用嗨，谢谢你的帮助，我做了更改，但错误是sameI建议你不要在不提及更改的情况下编辑你的问题，因为这是你代码中的一部分，也是导致问题的原因，可能会帮助将来的人更新答案，你能在什么时候再次检查吗我尝试了console.log（this.props）；show Object{}，但是我做了您的更改，而且不工作。您可以尝试和console.log（this.props）吗在CreateUserContainer components componetDidMount函数中，查看您是否获得了该函数Hi，感谢您的帮助，我进行了更改，但错误是sameI建议您不要编辑问题而不提及更改，因为这是代码中的一部分，也是导致问题的原因，可能会在将来的更新中帮助他人d答案是，当我尝试console.log（this.props）；show Object{}时，你能再检查一遍吗？但是我做了你的更改，不起作用。你能尝试在CreateUserContainer组件componetdimount函数中使用console.log（this.props），看看你是否得到了这个函数吗