Javascript 我正在导入和调用的函数是isn'；t在react应用程序中运行

我正在尝试从react应用程序中的组件运行firebase登录功能。然而，当我呼叫它时，它没有开火，我不知道为什么。我反复检查了我的拼写、外壳和输入，但还是弄不清楚。有人介意看一下吗？谢谢我试图调用的函数是login user，我已经对它的位置进行了注释，还包括了该函数

//function to-be called
import axios from 'axios';

export const loginuser = (userData) => (dispatch) => {

  console.log("loginuser hit");  //this is not firing and neither is my function.  

  axios
    .post('/login', userData)
    .then((res) => {
      axios.defaults.headers.common['Authorization'] = res.data.token;
      console.log(res.data.token);
    })
    .catch((err) => {
      console.log("error in axios login");
    });
};

/////class calling the function (in a different file)

import { loginuser } from './redux/userfunctions'


class Login extends Component {



  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
    };
  }


handleSubmit = (event) => {
  event.preventDefault();
  console.log("submit selected");
  const userData = {
      email: this.state.email,
      password: this.state.password
    };
    loginuser(userData);  //this is where I call the function
  };



  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

render() {
 return (
    <div className = "sign-in">
      <Topbar />
    <form onSubmit={this.handleSubmit}>
        <input
        type = "text"
        placeholder="Email"
        name="email"
        value={this.state.email}
        onChange = {this.handleChange}
        />

        <input
        type = "password"
        placeholder= "Password"
        name="password"
        value={this.state.password}
        onChange = {this.handleChange}
        />

        <button type = "submit"> Sign In </button>
      </form>

    </div>
  );
}
}

//要调用的函数
从“axios”导入axios；
导出常量登录用户=（用户数据）=>（调度）=>{
console.log（“logiuser hit”）；//这不是启动，我的函数也不是。
axios
.post（'/login'，userData）
。然后（（res）=>{
axios.defaults.headers.common['Authorization']=res.data.token；
console.log（res.data.token）；
})
.catch（（错误）=>{
log（“axios登录错误”）；
});
};
/////类调用函数（在其他文件中）
从“./redux/userfunctions”导入{loginuser}
类登录扩展组件{
构造函数（）{
超级（）；
此.state={
电子邮件：“”，
密码：“”，
};
}
handleSubmit=（事件）=>{
event.preventDefault（）；
控制台日志（“选择提交”）；
常量用户数据={
电子邮件：this.state.email，
密码：this.state.password
};
loginuser（userData）；//这是我调用函数的地方
};
handleChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
});
};
render（）{
返回(
登录
);
}
}

---

再次感谢

我可以在您的代码中看到4个错误

• 您的组件需要由HOC

  connect

  包装才能使用
• 您必须返回axios调用（因为它是一个，调度器将能够在将结果分派到操作之前等待）
• 您必须使用中所述的

  分派

  方法
• 您必须将要分派的操作传递到

  connect

  函数，并通过

  this.props.myDispatchFunction

  使用它（例如

  this.props.logiuser

  ）

//要调用的函数
从“axios”导入axios；
导出常量登录用户=（用户数据）=>（调度）=>{
console.log（“logiuser hit”）；//这不是启动，我的函数也不是。
//在这里添加了报税表
返回轴
.post（'/login'，userData）
。然后（（res）=>{
axios.defaults.headers.common['Authorization']=res.data.token；
console.log（res.data.token）；
})
.catch（（错误）=>{
log（“axios登录错误”）；
});
};
/////类调用函数（在其他文件中）
从'react redux'导入{connect}//添加了connect函数的导入
从“./redux/userfunctions”导入{loginuser}
类登录扩展组件{
构造函数（）{
超级（）；
此.state={
电子邮件：“”，
密码：“”，
};
}
handleSubmit=（事件）=>{
event.preventDefault（）；
控制台日志（“选择提交”）；
常量用户数据={
电子邮件：this.state.email，
密码：this.state.password
};
this.props.logiuser（userData）；//使用this.props.logiuser，而不是直接使用该函数触发调度程序
};
handleChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
});
};
render（）{
返回(
登录
);
}
}
导出默认连接（null，{loginuser}）（登录）；//使用'connect'函数包装组件，并添加分派函数。

---

我在你的代码中添加了一些注释，并修改了一些内容来修复它

谢谢oktapodia。我是个新手，非常感谢！函数返回另一个函数，该函数接受

dispatch

作为参数。您可能从一个有人使用redux的示例中复制了它。删除此部件

（分派）=>

//function to-be called
import axios from 'axios';

export const loginuser = (userData) => (dispatch) => {

  console.log("loginuser hit");  //this is not firing and neither is my function.  
  // Added the return here
  return axios
    .post('/login', userData)
    .then((res) => {
      axios.defaults.headers.common['Authorization'] = res.data.token;
      console.log(res.data.token);
    })
    .catch((err) => {
      console.log("error in axios login");
    });
};

/////class calling the function (in a different file)
import { connect } from 'react-redux' // Added the import of the connect function
import { loginuser } from './redux/userfunctions'


class Login extends Component {



  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
    };
  }


handleSubmit = (event) => {
  event.preventDefault();
  console.log("submit selected");
  const userData = {
      email: this.state.email,
      password: this.state.password
    };
    this.props.loginuser(userData);  // Use the this.props.loginuser instead of directly using the function to trigger the dispatcher
  };

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

render() {
 return (
    <div className = "sign-in">
      <Topbar />
    <form onSubmit={this.handleSubmit}>
        <input
        type = "text"
        placeholder="Email"
        name="email"
        value={this.state.email}
        onChange = {this.handleChange}
        />

        <input
        type = "password"
        placeholder= "Password"
        name="password"
        value={this.state.password}
        onChange = {this.handleChange}
        />

        <button type = "submit"> Sign In </button>
      </form>

    </div>
  );
}
}

export default connect(null, { loginuser })(Login); // Wrapped the component with the `connect` function and added the dispatch function.