javascript - redux 请求失败,状态码为 400(错误请求)
问题描述
我收到一个错误“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) - 动作创建函数需要参数
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())
}, []);
推荐阅读
- php - 获取 XML 变量
- bash - 如何在不使用任何外部编程语言(awk 等)的情况下打印 bash 中最常出现的单词
- python - 如何根据输入 CSV 中的条件将上一行、当前行和下一行写入输出 CSV 文件
- ruby-on-rails - 解析 youtube RSS 提要
- gradle - Gradle 构建失败 - 颤振
- java - 使用 Page Factory 时,是在自己的页面中定义相似的元素还是只定义一次更好?
- javascript - Redux 状态设置对象到对象
- express - 结合车把和 Node/Express 使用 Vue
- cloud-init - 为什么我的 cloud-init 脚本没有运行?
- android-mediacodec - 如何从给定的缓冲区解码视频?(媒体编解码器)