AxiosError：请求失败，状态码为 400（在 React JS 中）答案

【问题标题】：AxiosError : Request failed with status code 400 (in React JS)AxiosError：请求失败，状态码为 400（在 React JS 中）
【发布时间】：2022-06-21 23:37:32
【问题描述】：

我正在尝试使用 axios 发布 cmets。当我提交表单中输入的数据时，我在控制台中看到此错误：

AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {...}, request: XMLHttpRequest, ...}

这是我的代码：

import React, { useState } from 'react'
import TextField from '@material-ui/core/TextField';
import { Button } from '@material-ui/core'
import CommentsAPI from '../../Services/CommentsAPI'

export default function CommentForm() {

    const [comment, setComment] = useState({})

    const handleSubmit = async (event) => {
        event.preventDefault();
        try {
            const data = CommentsAPI.create(JSON.stringify(comment))
            console.log(data)
        } catch (error) {
            console.log(error)
        }
    }

    const handleChange = (event) => {
        const {name, value} = event.currentTarget
        setComment({
            ...comment,
            [name]: value
        })
    }

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <TextField 
                    id="pseudo" 
                    label="Pseudo" 
                    type="text" 
                    onChange={handleChange}
                    name="pseudo"
                />
            </div>
            <div>
                <TextField
                    id="outlined-multiline-static"
                    label="Comment"
                    multiline
                    minRows={2}
                    onChange={handleChange}
                    name="content"
                />
            </div>
            <div>
                <Button variant="contained" color="primary" type="submit">
                    Send
                </Button>
            </div>
        </form>
    )
}

CommentsAPI.js 文件：

import { URL_COMMENTS } from '../config'
import axios from 'axios'

function create(comment) {
    return axios.post(URL_COMMENTS, comment)
}

const CommentsAPI = {
    create
}

export default CommentsAPI

我正在尝试了解问题所在。非常感谢您的帮助！

看看我的服务器：

Collection type

Permission with POST api url

【问题讨论】：

我们无法告诉您为什么服务器认为您的请求不正确，因为您没有告诉我们有关服务器或服务器端代码的任何信息。
你好昆汀。我添加了两个屏幕截图：“集合类型”和“POST api url 的权限”。希望能帮助你理解。

标签： reactjs axios http-status-code-400 bad-request

【解决方案1】：

您没有向您的 API 发送任何内容。 CommentsAPI.create(YOUR COMMENT HERE)

const handleSubmit = async (event) => {
    event.preventDefault();
    try {
        // const data = CommentsAPI.create() // WRONG !
        // Create expects a comment, send something !
        const data = CommentsAPI.create('This is a test');
        // Or send the valu in your state
        // const data = CommentsAPI.create(comment.content);
    } catch (error) {
        console.log(error)
    }
}

另外，在您的服务器中，您需要返回有用的错误消息。就像“嘿，没有消息，请在有效负载中发送消息”。这将帮助您更好地了解正在发生的事情。

【讨论】：

谢谢齐德。我刚刚添加了“评论”，因为这是接收我的数据的对象。它也没有工作。
没有评论是一个对象。 API 需要一个字符串。控制台首先记录它以查看其中存储的内容。我猜它有这个形状 { content: 'some text', pseudo: 'some other text' }。或者您可以通过发送静态字符串来进行测试，仅用于测试目的。否则，如果这不起作用，您需要先查看 API 本身，也许我也会先在 Postman 上尝试一下！
谢谢。我将“comment”替换为“JSON.stringify(comment)”，这样当我在控制台记录它时，就会显示字符串 {"pseudo":"Test","content":"test"}。但我仍然有同样的错误。我用 Postman 测试了我的 API，确实，“数据”为空，“消息”在请求正文中缺少“数据”有效负载。我应该用 axios 改变一些东西还是其他地方的问题？
所以它也不适用于 Postman 吗？你需要看看 API 期望的有效载荷的形状是什么？ API 是否只需要一个字符串？它是否期望一个包含数据的对象，例如 { data: 'your comment goes here' }
如何找到我的 API 期望的有效载荷形状类型？我测试了很多解决方案，我还没有找到它。在这里，您收到了 Postman forum.strapi.io/t/help-me-to-use-strapi-400-error/18769 发送的错误。

【解决方案2】：

对于面临同样问题的其他任何人，如果您从具有列表的正文发送数据，请尝试将您的 get http 请求更改为发布。希望这会有所帮助。

【讨论】：