Question

我正在构建带有python flask后端的react.js应用，当我尝试提交登录信息时，出现以下异常：

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

我的注册操作创建者抛出了第一个异常，当我单击“提交”时，该异常在我的注册页面上触发（第二个异常）。

当我进一步调查“网络”选项卡中的响应时，尽管注册凭证完全是新颖的，但我还是收到了自定义的IntegrityError消息。

{"message:": "User with that email ro username already exists"}

无论出于何种原因，提交表单时，react似乎都没有向后端发送任何数据。我想补充一点，我在Postman上进行了测试，效果很好。

这是我的注册组件：

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 server.py文件中的create_user视图函数：

@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

由于我的尝试/例外中存在“完整性错误”（也许是？）-即使该电子邮件和用户名尚不存在。

在这里的任何帮助将不胜感激。

Answer 1

您需要使用Redux Thunk中间件来调度异步操作。您可以在这里阅读：https://github.com/reduxjs/redux-thunk

Answer 2

当您被服务器拒绝访问重复数据但您向其发送重复数据时，您将遇到此错误。 original description

请求失败，状态码为409：React前端和Python Flask后端

2 个答案: