react-hook-form axios post - 无法创建有效负载

Posted 2023-03-16

【中文标题】react-hook-form axios post - 无法创建有效负载

【英文标题】：react-hook-form axios post - unable to create payload

【发布时间】：2021-12-02 07:35:11

【问题描述】：

我正在使用 react-hook-form、axios 和功能组件将浏览器输入表单中的一些数据发布到数据库中。但是我只是不知道如何让 axios.post 识别“输入的表单数据”的基本方法。表单完全正常工作，我可以输入数据并可以在浏览器控制台中看到有效对象。但我的请求负载只是 。

API 端点也通过邮递员进行测试。我还验证了后端很好，因为我成功地测试了直接从我的 React 脚本发布的 json 对象（来自邮递员测试代码 sn-p）。只是不知道怎么把表单输入数据放到axios.post中。尽管在 google 和 youtube 上使用了几个小时，但还是找不到一个简单的答案！所以请帮忙！

抱歉，但我绝对是编程新手，这是我的第一篇文章！因此，如果可以的话，我不太可能理解技术答案并要求您输入代码更改。我的代码如下。

import React from "react";
import useForm from "react-hook-form";
import axios from "axios";

function Eirform() 
    const  register, handleSubmit, formState:  errors   = useForm();
    const onSubmit = (data) => console.log(data);

    axios
        .post('http://localhost:8000/tran', onSubmit,
            headers: 'Content-Type': 'application/json',
            ,
        )
        .then(response => console.log(response.data))
        .catch(error => console.log(error.data));

    return (
        <div>
            <h1>My Input Form</h1>
            <form onSubmit=handleSubmit(onSubmit)>
                <input type="text" placeholder="Tran #" ...register("trn_no",required: true)/>
                <input type="date" placeholder="Purchase date" ...register("pur_date",required: "Required")/>
                <input type="date" placeholder="Maturity date" ...register("mat_date",required: "Required")/>
                <input type="text" placeholder="Purchase Price" ...register("pur_pr",required: "Required")/>
                <input type="number" placeholder="Purchase Cost" ...register("pur_cost",required: "Required")/>
                <input type="text" placeholder="Coupon rate" ...register("cpn_rate",required: "Required")/>
                <input type="submit"/>
            </form>

        </div>

    )

export Eirform

browser console image

【参考方案1】：

您需要将您的 axios 帖子放在提交函数本身中，以便在那时执行。你现在拥有它的方式，它会在每次渲染时触发，并且会丢失 data 上下文，这就是你看到一个空对象的原因。

import React from "react";
import useForm from "react-hook-form";
import axios from "axios";

function Eirform() 
    const  register, handleSubmit, formState:  errors   = useForm();

    const onSubmit = data => 
       axios
        .post(
            'http://localhost:8000/tran',
            data,
             headers:  'Content-Type': 'application/json' 
         )
        .then(response => console.log(response.data))
        .catch(error => console.log(error.data));
    ;

    return (
        <div>
            <h1>My Input Form</h1>
            <form onSubmit=handleSubmit(onSubmit)>
                ...
            </form>
        </div>
    )

export Eirform