你好,我试图创建一个单独的文件夹为我的axios路线。我不希望他们在我的组件文件内的React。
我已经在下面的文件夹下尝试了这个,与我的组件文件夹分开。src〉actions〉authentication
import axios from 'axios';
export const signupUser = (user, history) => dispatch => {
axios.post('http://localhost:3000/signup', user)
console.log(user)
.then(res => history.push('/login'))
.catch(err => {
console.log(err);
});
};
在Signup.js组件中,我有以下内容,它们当前不起作用
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { signupUser } from '../actions/authentication';
import axios from 'axios';
let today = new Date();
let date = today.getFullYear()+ '-' + (today.getMonth()+1)+ '-' +today.getDate();
class Signup extends Component {
constructor() {
super()
this.state = {
first_name: '',
last_name: '',
user_name: '',
email: '',
password: '',
created_on: date,
isSignedup: false
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
console.log(this.state);
}
handleSubmit = (e) => {
e.preventDefault();
const user = {
first_name: this.state.first_name,
last_name: this.state.last_name,
email: this.state.email,
user_name: this.state.user_name,
password: this.state.password,
created_on: this.state.created_on,
isSignedup: !this.state.isSignedup
}
.then(data => {
console.log(data);
this.props.history.replace('/login');
})
.catch(err => {
console.log(err);
})
}
只有在我的组件〉Signup.js中,如果我在组件中有如下的实际axios路由,它才能工作:
handleSubmit = (e) => {
e.preventDefault();
axios.post('http://localhost:3000/signup', {
first_name: this.state.first_name,
last_name: this.state.last_name,
email: this.state.email,
user_name: this.state.user_name,
password: this.state.password,
created_on: this.state.created_on,
isSignedup: !this.state.isSignedup
})
.then(data => {
console.log(data);
this.props.history.replace('/login');
})
.catch(err => {
console.log(err);
})
}
我一直收到的错误是then不是一个函数。有人能帮我解决这个问题吗?提前谢谢。
2条答案
按热度按时间luaexgnf1#
由于以下代码,您将得到错误
.then is not a function
:这不是有效的javascript。将一个对象赋给一个变量并不会产生承诺。你必须实际调用
signupUser
。此外,我不明白为什么你传递调度到您的注册函数,如果你从来没有调用它?
cfh9epnr2#
您的思路是正确的,因为它使应用程序的设计更加模块化。
你可以创建一个名为
apis/
的文件夹,它不一定要这么叫,但我只是给你一个例子。然后在里面创建一个名为myjson.js
的文件,你可以用你认为最好的名字来命名它。在这个文件夹里,你会看到这样的东西:然后,您可以在操作创建器中实现
myJson.post()
你也可以这样做:
当然,以上是基于一次性密码类型的身份验证,因此可以根据您的体系结构的逻辑对其进行调整。
另外,如果要将
constructor
函数与super(props)
一起使用,则需要像我刚才所做的那样将props
传递给它。您可以通过使用ES 7并仅分配
您已经在
handleSubmit
中使用了箭头函数,因此无需执行以下操作:箭头函数负责处理this
的上下文。我们可以进一步使用ES 7 async/await语法重构
handleSubmit
函数,使其看起来更简洁,如下所示:为了处理错误,因为我们使用async/await,我们可以用try/catch块 Package 所有等待的内容,如下所示:
因此,您可以通过这种方式捕获并在控制台上记录错误。
尝试/捕捉并不是ES 2015/16/17的新功能,它已经存在了一段时间。
本质上,每当你想处理由await语句管理的请求引发的错误时,我们可以用try/catch语句 Package 它。
失败的网络请求响应将作为错误对象传入,我们可以控制台记录它以查看发生了什么。