[英]redux Failed to load resource: the server responded with a status of 400 (Bad Request)
[英]redux request failed with status code 400(bad request)
我收到一个错误“400 bad request”我在下面找不到我的错误我分享了我的前端和后端代码..我还分享了我来的图像错误链接https://ibb.co/swQPgYG
@@@@@@@@@@@@@@@@@@@@后端@@@@@@@@@@@@@@@@@@@@@@
todoschema.js
这是一个 todoschema
var mongoose = require('mongoose');
var todoSchema = new mongoose.Schema({
name: {
type: String,
required: true,
maxlength:32,
trim:true
}
},{timestamps:true}
)
module.exports = mongoose.model('Todo',todoSchema)
auth.js/路由器
var express = require('express');
var router = express.Router();
const {addTodo} = require('../controller/auth');
router.post('/addtodo',addTodo);
module.exports = router;
auth.js/控制器
const Todo = require('../model/todo');
exports.addTodo = (req,res) =>{
const todo = new Todo(req.body)
todo.save((err,todo) => {
if(err || !todo){
return res.status(400).json({
err : 'NOT able to store data in database'
})
}
res.json(todo);
})
}
################## 前端 ###########################
API == http://localhost:8000/api/
在这里我从我的后端获取请求
index.js
import {API} from '../backend'
import axios from 'axios'
export const getdata = (todo) => {
return (dispatch) => {
axios.post(`${API}addtodo`)
.then(res => {
console.log(res)
dispatch({
type : 'FETCH_TODO',
payload : todo
})
})
.catch(err =>{
console.log(err);
})
}
}
这是我添加待办事项的 todoForm
todoform.js
import React,{useState, useEffect} from 'react'
import '../App.css'
import {
FormGroup,
Input,
Button,
Form,
InputGroup,
InputGroupAddon
} from 'reactstrap';
import {v4} from 'uuid';
import 'bootstrap/dist/css/bootstrap.min.css';
import {getdata } from '../Auth'
//redux
import {connect, useDispatch} from 'react-redux'
import {addTodo} from '../Action/todo';
const TodoForm = ({addTodo}) => {
const [title,setTitle] = useState('')
const dispatch = useDispatch();
useEffect(() => {
dispatch(getdata())
}, []);
return(
<Form>
<FormGroup>
<InputGroup>
<Input
type='text'
name='todo'
id='todo'
placeholder='Your next Todo'
value={title}
onChange={e => setTitle(e.target.value)}
/>
<InputGroupAddon addonType='prepend'>
<Button color='primary' onClick={()=>{
if(title === ''){
return alert('please add a todo')
}
const todo = {
title,
id:v4(),
}
addTodo(todo);
setTitle('');
}}>
ADD
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Form>
)
}
const mapStateToProps = state => ({
})
const mapDispatchToProps = dispatch =>({
addTodo : todo =>{
dispatch(addTodo(todo))
},
})
export default connect(mapStateToProps,mapDispatchToProps)(TodoForm)
getData(todo) - 动作创建者 function 需要参数
export const getdata = (todo) => {
return (dispatch) => {
axios.post(`${API}addtodo`)
.then(res => {
console.log(res)
dispatch({
type : 'FETCH_TODO',
payload : todo
})
})
.catch(err =>{
console.log(err);
})
}
}
你没有争论地称呼它
const dispatch = useDispatch();
useEffect(() => {
dispatch(getdata())
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.