Uncaught (в обещании) Ошибка: запрос не выполнен с кодом состояния 400, Как я могу решить эту ошибку в React.js + Django App?

Question

Я программирую приложение с Django rest API и внешним интерфейсом React.js, установленным в приложении django.

Я сталкиваюсь с ошибкой при попытке сделать пост-запрос от реакции на остальные API.

Публикация в Django rest API работает в почтальоне. Я пытаюсь настроить компонент с помощью ловушки useState, Redux и axios.

Я не совсем уверен, что правильно настроил состояние.

Вот соответствующий код: Из компонента формы (я подозреваю, что ошибка здесь):

import React, { useState } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { addLead } from "../../actions/leads";

const Form = ({ addLead }) => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const onSubmit = e => {
    e.preventDefault();
    const lead = { name, email, message };

    addLead(lead);
    // Clear Fields
    setName("");
    setEmail("");
    setMessage("");
  };
  return (
    <div className="card card-body mt-4 mb-4">
      <h2>Add Lead</h2>
      <form onSubmit={onSubmit}>
        <div className="form-group">
          <label>Name</label>
          <input
            className="form-control"
            type="text"
            name="name"
            onChange={e => setName(e.target.value)}
            value={name}
          />
        </div>
        <div className="form-group">
          <label>Email</label>
          <input
            className="form-control"
            type="email"
            name="email"
            onChange={e => setEmail(e.target.value)}
            value={email}
          />
        </div>
        <div className="form-group">
          <label>Message</label>
          <textarea
            className="form-control"
            type="text"
            name="message"
            onChange={e => setMessage(e.target.value)}
            value={message}
          />
        </div>
        <div className="form-group">
          <button type="submit" onClick={onSubmit} className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    </div>
  );
};

Form.propTypes = {
  addLead: PropTypes.func.isRequired
};

export default connect(
  null,
  { addLead }
)(Form);

Из действий / отведений:

// ADD LEAD
export const addLead = lead => dispatch => {
  try {
    axios.post("/api/leads/", lead).then(res => {
      dispatch({
        type: ADD_LEAD,
        payload: res.data
      });
    });
  } catch (err) {
    console.log(err);
  }

Из моего редуктора:

 case ADD_LEAD:
      return {
        ...state,
        leads: [...state.leads, action.payload]
      };

Серверы работают без ошибок. Форма отображается и функции onChange работают. Функция onSubmit в Form.js выше вызывает проблему. Вот ошибка:

VM348 xhr.js:172 POST http://localhost:8000/api/leads/ 400 (Bad Request)
dispatchXhrRequest @ VM348 xhr.js:172
xhrAdapter @ VM348 xhr.js:11
dispatchRequest @ VM342 dispatchRequest.js:59
Promise.then (async)
request @ VM339 Axios.js:53
Axios.<computed> @ VM339 Axios.js:78
wrap @ VM337 bind.js:9
eval @ VM333 leads.js:44
eval @ VM364 index.js:9
dispatch @ VM280:1
eval @ VM315 redux.js:483
onSubmit @ VM297 Form.js:46
callCallback @ VM290 react-dom.development.js:362
invokeGuardedCallbackDev @ VM290 react-dom.development.js:411
invokeGuardedCallback @ VM290 react-dom.development.js:466
invokeGuardedCallbackAndCatchFirstError @ VM290 react-dom.development.js:480
executeDispatch @ VM290 react-dom.development.js:612
executeDispatchesInOrder @ VM290 react-dom.development.js:637
executeDispatchesAndRelease @ VM290 react-dom.development.js:743
executeDispatchesAndReleaseTopLevel @ VM290 react-dom.development.js:752
forEachAccumulated @ VM290 react-dom.development.js:724
runEventsInBatch @ VM290 react-dom.development.js:769
runExtractedPluginEventsInBatch @ VM290 react-dom.development.js:914
handleTopLevel @ VM290 react-dom.development.js:5848
batchedEventUpdates$1 @ VM290 react-dom.development.js:24343
batchedEventUpdates @ VM290 react-dom.development.js:1463
dispatchEventForPluginEventSystem @ VM290 react-dom.development.js:5943
attemptToDispatchEvent @ VM290 react-dom.development.js:6059
dispatchEvent @ VM290 react-dom.development.js:5963
unstable_runWithPriority @ VM292 scheduler.development.js:815
runWithPriority$2 @ VM290 react-dom.development.js:12188
discreteUpdates$1 @ VM290 react-dom.development.js:24359
discreteUpdates @ VM290 react-dom.development.js:1486
dispatchDiscreteEvent @ VM290 react-dom.development.js:5926
VM350 createError.js:16 Uncaught (in promise) Error: Request failed with status code 400
    at createError (VM350 createError.js:16)
    at settle (VM349 settle.js:17)
    at XMLHttpRequest.handleLoad (VM348 xhr.js:59)

Что может быть причиной этой проблемы? Спасибо.

Answer 1

В файле models.py в приложении Leads я изменил модель, чтобы она соответствовала сообщению о реакции. Это рабочая модель:

class Lead(models.Model):
  name = models.CharField(max_length=100)
  email = models.EmailField(max_length=100, unique=True)
  message = models.CharField(max_length=500, blank=True)
  created_at = models.DateTimeField(auto_now_add=True)

Как только я изменил это, я просто запустил

python mangage.py makemigrations leads

&

python manage.py migrate

в моем терминале виртуальной среды.

Проблема решена.