Praktykuję haczyk w reakcji z projektem listy TODO. Metody GET i Usuń działają dobrze, ale kiedy próbuję opublikować nowy przedmiot odpowiedź na to jest 400 "złej prośby".

Mój projekt ma backend w Django i wszystkie metody, działa idealnie, co sprawia, że myślę, że problem jest z przodu.

To jest moja aplikacja:

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;

A oto mój komponent formularza:

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;

Szukałem kilku miejsc i wydaje mi się, że mój kod jest poprawny, ale nie mogę znaleźć problemu.

Zostawiam przechwycenie odpowiedzi:

enter image description here

0
Iván 19 styczeń 2020, 19:02

1 odpowiedź

Najlepsza odpowiedź

Rozwiązałem go, ThePost () musi być taki:

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

Drugi parametr w funkcji POST musi być obiektem, w którym klawisz jest atrybutem modelu, a wartość jest "pozycja", która zawiera tekst zadania

0
Iván 29 styczeń 2020, 11:54