redux 請求失敗，狀態碼為 400（錯誤請求）

Question

我收到一個錯誤“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)

Answer 1

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())
    }, []);