redux 请求失败,状态代码为409:React前端和Python Flask后端

iyfamqjs  于 2023-06-23  发布在  React
关注(0)|答案(3)|浏览(177)

我正在构建一个带有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中-即使电子邮件和用户名不存在。
我们将不胜感激。

7fyelxc5

7fyelxc51#

当服务器拒绝您访问重复数据,但您向其发送重复数据时,您将遇到此错误。原始描述

kfgdxczn

kfgdxczn2#

当数据库中已存在相同的条目时,会发生此错误

cnh2zyt3

cnh2zyt33#

你需要使用Redux Thunk中间件来分派异步动作。你可以在这里阅读它:https://github.com/reduxjs/redux-thunk

相关问题