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

Question

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

\n

AxiosError\xc2\xa0{message: \'请求失败，状态代码 400\'，名称：\'AxiosError\'，代码：\'ERR_BAD_REQUEST\'，配置：{\xe2\x80\xa6}，请求：XMLHttpRequest， \xc2\xa0\xe2\x80\xa6}

\n

这是我的代码：

\n

import React, { useState } from \'react\'\nimport TextField from \'@material-ui/core/TextField\';\nimport { Button } from \'@material-ui/core\'\nimport CommentsAPI from \'../../Services/CommentsAPI\'\n\nexport default function CommentForm() {\n\n    const [comment, setComment] = useState({})\n\n    const handleSubmit = async (event) => {\n        event.preventDefault();\n        try {\n            const data = CommentsAPI.create(JSON.stringify(comment))\n            console.log(data)\n        } catch (error) {\n            console.log(error)\n        }\n    }\n\n    const handleChange = (event) => {\n        const {name, value} = event.currentTarget\n        setComment({\n            ...comment,\n            [name]: value\n        })\n    }\n\n    return (\n        <form onSubmit={handleSubmit}>\n            <div>\n                <TextField \n                    id="pseudo" \n                    label="Pseudo" \n                    type="text" \n                    onChange={handleChange}\n                    name="pseudo"\n                />\n            </div>\n            <div>\n                <TextField\n                    id="outlined-multiline-static"\n                    label="Comment"\n                    multiline\n                    minRows={2}\n                    onChange={handleChange}\n                    name="content"\n                />\n            </div>\n            <div>\n                <Button variant="contained" color="primary" type="submit">\n                    Send\n                </Button>\n            </div>\n        </form>\n    )\n}\n

\n

CommentsAPI.js 文件：

\n

import { URL_COMMENTS } from \'../config\'\nimport axios from \'axios\'\n\nfunction create(comment) {\n    return axios.post(URL_COMMENTS, comment)\n}\n\nconst CommentsAPI = {\n    create\n}\n\nexport default CommentsAPI\n

\n

我试图了解出了什么问题。非常感谢您的帮助 ！

\n

看看我的服务器：

\n

收藏类型

\n

POST api url 的权限

\n

Answer 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)
    }
}

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