Reactjs 我在react hook项目的POST请求中有一个400代码

我正在练习与待办事项列表项目挂钩。GET和DELETE方法工作正常，但是当我尝试发布一个新项目时，对它的响应是400个“错误请求”

我的项目的后端是Django，那里的所有方法都工作得很好，这让我觉得问题就在前面

这是我的app.js：

import React, { useState, useEffect } from 'react';
import Tasks from './components/tasks/Tasks';
import Form from './components/form/Form';
import axios from 'axios';

const App = () => {

  const [todoList, setTodoList] = useState([])


  useEffect(() => {
    axios
      .get('http://localhost:8000/api/todo/tasks')
      .then(res => setTodoList(res.data))
      .catch(err => console.log(err));
  },[])


  const deleteTask = item => {
    const erased = setTodoList(todoList.filter(el => el !== item))
    axios
      .delete(`http://localhost:8000/api/todo/tasks/${item.id}/`)
      .then(res => erased);
  };

  const submit = item => {
    axios
      .post('http://localhost:8000/api/todo/tasks/', item)
      .then(res => setTodoList([...todoList, item]));

  };



  return (
    <div className="todo-app container">
      <h2 className="center blue-text">Listado de tareas</h2>
      <Tasks tasks={todoList} del={deleteTask}/>
      <Form saveTask={submit} />
    </div>
  );
}

export default App;

import React，{useState，useffect}来自“React”；
从“./components/Tasks/Tasks”导入任务；
从“./components/Form/Form”导入表单；
从“axios”导入axios；
常量应用=（）=>{
常量[todoList，setTodoList]=useState（[]）
useffect（（）=>{
axios
.get（'http://localhost:8000/api/todo/tasks')
.然后（res=>setTodoList（res.data））
.catch（err=>console.log（err））；
},[])
const deleteTask=项目=>{
const erased=setTodoList（todoList.filter（el=>el！==item））
axios
.删除(`http://localhost:8000/api/todo/tasks/${item.id}/`）
。然后（res=>擦除）；
};
const submit=项目=>{
axios
.post（'http://localhost:8000/api/todo/tasks/",项目)
。然后（res=>setTodoList（[…todoList，item]）；
};
返回(
塔雷斯酒店
);
}
导出默认应用程序；

这是我的表单组件：

import React, { useState } from 'react';
import './Form.css';

const Form = ({ saveTask }) => {

  const [value, setValue] = useState('')


  const handleSubmit = e => {
    e.preventDefault()
    saveTask(value)
    setValue("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>Escribe una tarea</label>
        <input 
        type="text" 
        value={value}
        onChange={e => setValue(e.target.value)}
        />
        <button
          type="submit"
          className="waves-effect waves-light btn buttonColor"
        >
          Crear tarea
        </button>
      </form>
    </div>
  );
}

export default Form;

import React，{useState}来自“React”；
导入“/Form.css”；
常量形式=（{saveTask}）=>{
const[value，setValue]=useState（“”）
常量handleSubmit=e=>{
e、 预防默认值（）
保存任务（值）
设置值（“”）；
};
返回(
描述乌纳塔里亚
setValue（e.target.value）}
/>
睑板
);
}
导出默认表单；

我搜索了几个地方，似乎我的代码是正确的，但我找不到问题

我留下了一个回应的截图：

我解决了它，.post（）必须是这样的：

axios
      .post('http://localhost:8000/api/todo/tasks/', {
        title: item,
      })
      .then(res => {
        const element = res.data
        setTodoList([...todoList, element])
      });

---

post函数中的第二个参数必须是一个对象，其中键是模型的属性，值是包含任务文本的“项”

检查在Devtool的“网络”中发出的请求选项卡，并将其与后端期望的内容进行比较。我注意到

http://localhost:8000/api/todo/tasks/

此链接有一个额外的

/

。在您确定这是UI问题之前，您可以尝试在另一个工具中调用此API，例如，

Postman

windmaomao最后的“/”是正确的，否则我会得到500个代码。在Postman和Django的客户端中，所有http方法都可以正常工作。