在 React 中使用 Axios POST 时出现 400 BAD REQUEST答案

【问题标题】：400 BAD REQUEST when POST using Axios in React在 React 中使用 Axios POST 时出现 400 BAD REQUEST
【发布时间】：2020-11-11 18:32:30
【问题描述】：

谁能帮帮我？

我不断收到来自 Axios 的 400 错误请求。

我可以传递一个 GET 请求并确认它工作正常。

我使用以下代码创建 http-common.js 文件：

import axios from 'axios';

export default axios.create({
    baseURL: 'https://5fa97367c9b4e90016e6a7ec.mockapi.io/api',
    headers: {
        'Content-type': 'application/json'
    }
});

然后，我创建了一个使用上面的 axios 对象发送 HTTP 请求的服务。

TodoService.js

import http from '../http-common/http-common';

const getAll=()=>{
    return http.get('/todos');
};

const get=id=>{
    return http.get(`/todos/${id}`);
};

const create=data=> {
    return http.post('/todos',data);
};

const update=(id,data)=>{
    return http.put(`/todos/${id}`,data);
};

const remove = id => {
    return http.delete(`/todos/${id}`);
  };
  
const removeAll = () => {
    return http.delete(`/todos`);
  };
  
const findByTitle = title => {
    return http.get(`/todos?title=${title}`);
  };

  export default {getAll,get,create,update,remove,removeAll,findByTitle};

然后，我在 AddTodos 组件中使用 TodoDataService.create(data) ...。

AddTodos.js

import React, { useState } from 'react';
import TodoDataService from '../services/TodoService';

const AddTodos = () => {

    const initialTodoState={
        id:null,
        title: '',
        isDone: false,
        user: ''
    };

    const [todo,setTodo]=useState(initialTodoState);
    const [submitted,setSubmitted]=useState(false);

    const handleInputChange=event=>{
        const {name,value}=event.target;
        setTodo({...todo,[name]:value});
    };

    const saveTodo =()=>{
        var data={
            title: todo.title,
            isDone:todo.isDone,
            user: todo.user
            
        };
        console.log(data);

        TodoDataService.create(data)
        .then(response => {
            setTodo({
                id:response.data.id,
                title: response.data.title,
                isDone: response.data.isDone,
                user: response.data.user
            });
            setSubmitted(true);
            console.log(response.data);
        })
        .catch(e => {
            console.log(e);
        });
    };

    const newTodo=()=>{
        setTodo(initialTodoState);
        setSubmitted(false);
    };

    return (
        <div className="submit-form">
      {submitted ? (
        <div> //...
      ) : (
        <div>
          <div className="form-group"> //...  </div>
          
          <div className="form-group"> //...  </div>

          <button onClick={saveTodo} className="btn btn-success">
            Submit
          </button>
        </div>
      )}
    </div>
    )
}

export default AddTodos;

点击提交时出现此错误：

【问题讨论】：

这是您对http-common 的完整实现吗？如果是，那么您的 http-common 根本不会做任何事情。您的创建不接受任何数据

标签： javascript reactjs http axios bad-request

【解决方案1】：

我重新创建了你的 api 调用并得到了这个响应：

await fetch('https://5fa97367c9b4e90016e6a7ec.mockapi.io/api/todos', {
method: 'POST', body: JSON.stringify({id: "123",title: "homework", isDone: false, user: "foo"})})
      .then(response => response.json())
      .then(data => {
      console.log(data) 
      })

error 400 "Max number of elements reached for this resource!"

您需要删除一些记录才能插入新记录

所以删除记录后：

await fetch('https://5fa97367c9b4e90016e6a7ec.mockapi.io/api/todos/1', {
method: 'DELETE'})
      .then(response => response.json())
      .then(data => {
      console.log(data) 
      })

VM623:5 {id: "1", title: "deneme", isDone: true, user: "cafererensimsek"}

并发布一个新的，现在它可以工作了

【讨论】：