javascript - 在 React 中使用 Axios POST 时出现 400 BAD REQUEST
问题描述
有什么可以帮助我的吗?
我不断收到来自 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;
单击提交时出现此错误:
解决方案
我重新创建了您的 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”,标题:“deneme”,isDone:true,用户:“cafererensimsek”}
并发布一个新的,现在它可以工作了
推荐阅读
- java - 服务器在错误的目录中寻找jsp Spring MVC + Tomcat
- node.js - Promises 如何在 node/feathersjs 中工作?
- c# - 如何读取 Windows 窗体控件上的数据绑定
- reactjs - 使用 fieldarray 创建 redux-form 动态数据驱动输入
- java - Android studio 的 studio.exe 打不开,Windows 10 32-Bit
- vba - VBA - 根据另一个工作簿上的值填充列
- php - PHP - 使用自定义 xml 发布 SOAP 请求
- c - 当我尝试从 C 中的函数返回 char 数组时出错。程序在 CLion 中有效,但在 repl.it 中无效
- javascript - 将 yyyy-mm-ddThh:mm:ss 转换为 dd mm yyyy, hh:mm am/pm
- sql - 如何在 SQL Server 中编写客户订单