我正在构建一个带有python flask后端的react.js应用,当我尝试提交登录信息时,我得到了以下Exception:
Exception in actions/user/signup err Error: Request Failed with status code 409
Exception on Signup.onSubmit err Error: Actions must be plain objects. Use custom middleware
for async actions
第一个异常是在我的注册操作创建器上抛出的,当我单击提交时,它在我的注册页面上触发(第二个异常)。
当我进一步调查Network选项卡中的响应时,我得到了自定义的IntegrityError消息,尽管注册凭据是完全新颖的。
{"message:": "User with that email ro username already exists"}
不管出于什么原因,react在提交表单时似乎没有向后端发送任何数据。我想补充一点,我在 Postman 上测试了这个,它工作得很好。
下面是我的Register组件:
import React, {Component} from 'react';
import {compose} from 'redux';
import {connect} from 'react-redux';
import { Dispatcher, View, Action, Input } from 'react-router-flux';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';
import axios from 'axios';
import _ from 'lodash'
import Logo from './Logo';
import Loader from './Loader';
import {signupUser, signupUserToy } from './user';
import {renderTextInput, onChange} from './inputs';
import RegisterForm from './RegisterForm'
class Register extends Component{
constructor(props){
super(props)
this.renderTextInput = renderTextInput.bind(this)
this.onChange = onChange.bind(this)
}
state = {
username: '',
email: '',
password: '',
id: null,
user_id: null,
loading: false,
touched: false
}
toggleTouched = () => {
this.setState( prevState => ({
touched: !prevState.touched
}));
}
handleMouseUp = () => {
setTimeout( () => {
this.setState({ touched: false });
}, 150);
}
onSubmit = async (values) => {
this.setState({loading: true})
try{
const {username, email, password, user_id, id} = this.state
await this.props.signupUser(username, email, password)
await this.props.signupUserToy(username, email, password, id, user_id)
this.props.history.push('/api/user_profile')
return
} catch(err){
console.log("Exception on Signup.onSubmit err", err) // Here is the Exception
}
this.setState({loading: false})
}
render() {
const {user, toy, history} = this.props
const { loading, touched } = this.state
........
return(
........
<RegisterForm onSubmit={this.onSubmit} /> // Generic Redux Form
........
const mapStateToProps = (state) => ({
user: state.user,
toy: state.toy
});
export default connect(mapStateToProps, {signupUser, signupUserToy})(Register);
以下是我的注册操作创建者:
import axios from 'axios' //http client
import {API_URL} from './constants'
export const FETCH_USER = 'fetch_user'
export const LOGOUT_USER = 'logout_user'
export const FETCH_TOY = 'fetch_toy'
export const LOGOUT_TOY = 'logout_toy'
export const signupUser = async (username, email, password) => {
try{
const response = await axios({
method: 'POST',
url: `${API_URL}/api/create_user`, // Here is the problem
data: {
username,
email,
password
}
})
console.log('signupUser response', response)
const newResponse = await axios({
method: 'POST',
url: `${API_URL}/api/get_token`,
data: {
email,
password
}
})
console.log('signupUser newResponse', newResponse)
const {token} = response.data
const userResponse = await axios({
method: 'POST',
url: `${API_URL}/api/login`,
headers: {
Authorization: `${token}`
},
data: {
email,
password
}
})
console.log("signupUser userResponse", userResponse)
const getProfileResponse = await axios({
method: 'POST',
url: `${API_URL}/api/user_profile`,
headers: {
Authorization: `${token}`
},
data: {
email
}
})
console.log('signupUser getProfileResponse', getProfileResponse)
const {Avatar, Location, Name} = getProfileResponse.data
const aboutMe = getProfileResponse.data['About Me']
const memberSince = getProfileResponse.data['Member Since']
return (
{
type: FETCH_USER,
payload: {
token,
username,
email,
password,
name: Name,
location: Location,
aboutMe,
memberSince,
picture: Avatar
}
}
)
} catch(err){
console.log("Exception in actions/user/signupUser err", err)
}
}
下面是我的flask www.example.com文件中的create_user视图函数:server.py file:
@app.route("/api/create_user", methods=["POST"]) # FIRST ONE WITHOUT /CONFIRM
def create_user():
incoming = request.get_json()
print("server create_user incoming", incoming)
user = User(
username=incoming["username"],
email=incoming["email"],
password=incoming["password"]
)
db.session.add(user)
try:
db.session.commit()
except IntegrityError:
db.session.rollback()
return jsonify(message="User with that email or username already exists"), 409
user = User.query.filter_by(email=incoming["email"]).first()
token = generate_token(user)
send_email(user.email, 'Confirm Your Account', 'https://neighborzoo.com/api/confirm/' +
token)
message = 'A confirmation email has been sent to you by email'
return jsonify(
id=user.id,
token=token,
username=user.username,
email=user.email,
message=message
)
操作创建器中的以下端点:
url: `${API_URL}/api/create_user`
是什么触发了异常。
这个端点来自我的flask文件:
@app.route("/api/create_user", methods=["POST"])
并触发:
return jsonify(message="User with that email or username already exists"), 409
因为“完整性错误”(也许?)在我的try/except中-即使电子邮件和用户名不存在。
我们将不胜感激。
3条答案
按热度按时间7fyelxc51#
当服务器拒绝您访问重复数据,但您向其发送重复数据时,您将遇到此错误。原始描述
kfgdxczn2#
当数据库中已存在相同的条目时,会发生此错误
cnh2zyt33#
你需要使用Redux Thunk中间件来分派异步动作。你可以在这里阅读它:https://github.com/reduxjs/redux-thunk