将表单参数传递给 React 中的 REST API
Pass parameters of a form to a REST API in React
我有一个 REST API,我想在提交数据时使用 JavaScript 和 ReactJS 传递表单的多个值,例如参数。
我的问题是在 React Hook Forms 中发送表单的值
这是我的 API:
const URL = 'https://localhost:8000'
export const FetchRewards = async (id, serial) => {
const res = await axios.get(`${URL}/api/public/validate_ticket?serial=${serial}&ticket_id=${id}`);
if (res.status !== 200) return [];
return res.data;
};
这是我的组件:
import { React, useEffect, useState } from 'react'
import { useForm } from "react-hook-form"
import { FetchRewards } from '../services/consultAPI'
export default function RequestModule() {
const [Ticket, setTicket] = useState(null);
const [Res, setRes] = useState(null);
const [TicketDate, setTicketDate] = useState(null);
const [Rewards, setRewards] = useState([]);
const [status, verifyStatus] = useState(null)
const [existRewards, setExistRewards] = useState(false);
const getData = async(id, serial) => {
const data = await FetchRewards(id, serial);
setRes(data);
setTicketDate(data.ticket.fecha_juega);
setRewards(data.premios);
setTicket(data.ticket.ticket);
verifyStatus(data.ticket.status);
setExistRewards(true);
}
useEffect(()=>{
if(!existRewards) getData();
},[existRewards])
const{
register,
handleSubmit,
formState: { errors }
} = useForm();
const onSubmit = (data) => {
console.log(JSON.stringify(data.id))
console.log(JSON.stringify(data.Serial))
};
const petitionRequest = () => {
<div className="consulta">
<img src={bgConsulta} alt="consulta"/>
</div>
}
console.log(onSubmit)
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label>
<p className="mini-text padd">ID</p>
<input {...register("id", { required: true, maxLength: 16 ,pattern: /^\d+$/g })} className="form-control" type="text" placeholder="ID"/>
{errors.id?.type === 'pattern' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Only accept numbers</p>}
{errors.id?.type === 'required' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Required</p>}
<div className="spacing"><p className="mini-text">Last 5 digits of Serial</p>
<input {...register("Serial", { required: true, maxLength: 5, minLength: 5, pattern: /^\w+$/g })} className="form-control" type="text" placeholder="Serial"/></div>
{errors.Serial?.type === 'pattern' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Onlt text and numbers</p>}
{errors.Serial?.type === 'maxLength' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Only 5 numbers</p>}
{errors.Serial?.type === 'minLength' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Only 5 numbers</p>}
{errors.Serial?.type === 'required' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Required</p>}
<div className="spacing">
<button className="btn btn-success submitbtn" type="submit">
SEND
</button>
</div>
</label>
</form>
);
在 onSubmit 控制台的箭头函数中 return 字符串中的 ID 和字符串中的序列号,但我的问题是试图将这些值作为函数 FetchRewards(id, serial) 中的参数传递,我试图在提交按钮中使用 onClick,但它 returns: xhr.js:210 GET https://localhost:8000/api/public/validate_ticket?serial=undefined&ticket_id=undefined 500 (Internal Server Error)
当我点击按钮时
尝试更改表单的 onSubmit
你的
<form onSubmit={handleSubmit(onSubmit)}>
至
<form onSubmit={() => handleSubmit(onSubmit)} />
或者只是
<form onSubmit={handleSubmit} />
以这种方式执行函数似乎很奇怪,因为您必须提供回调函数,而不是要执行的代码。
问题的答案是:
const onSubmit = (data) => {
getData(data.id, data.Serial)
}
我有一个 REST API,我想在提交数据时使用 JavaScript 和 ReactJS 传递表单的多个值,例如参数。
我的问题是在 React Hook Forms 中发送表单的值
这是我的 API:
const URL = 'https://localhost:8000'
export const FetchRewards = async (id, serial) => {
const res = await axios.get(`${URL}/api/public/validate_ticket?serial=${serial}&ticket_id=${id}`);
if (res.status !== 200) return [];
return res.data;
};
这是我的组件:
import { React, useEffect, useState } from 'react'
import { useForm } from "react-hook-form"
import { FetchRewards } from '../services/consultAPI'
export default function RequestModule() {
const [Ticket, setTicket] = useState(null);
const [Res, setRes] = useState(null);
const [TicketDate, setTicketDate] = useState(null);
const [Rewards, setRewards] = useState([]);
const [status, verifyStatus] = useState(null)
const [existRewards, setExistRewards] = useState(false);
const getData = async(id, serial) => {
const data = await FetchRewards(id, serial);
setRes(data);
setTicketDate(data.ticket.fecha_juega);
setRewards(data.premios);
setTicket(data.ticket.ticket);
verifyStatus(data.ticket.status);
setExistRewards(true);
}
useEffect(()=>{
if(!existRewards) getData();
},[existRewards])
const{
register,
handleSubmit,
formState: { errors }
} = useForm();
const onSubmit = (data) => {
console.log(JSON.stringify(data.id))
console.log(JSON.stringify(data.Serial))
};
const petitionRequest = () => {
<div className="consulta">
<img src={bgConsulta} alt="consulta"/>
</div>
}
console.log(onSubmit)
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label>
<p className="mini-text padd">ID</p>
<input {...register("id", { required: true, maxLength: 16 ,pattern: /^\d+$/g })} className="form-control" type="text" placeholder="ID"/>
{errors.id?.type === 'pattern' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Only accept numbers</p>}
{errors.id?.type === 'required' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Required</p>}
<div className="spacing"><p className="mini-text">Last 5 digits of Serial</p>
<input {...register("Serial", { required: true, maxLength: 5, minLength: 5, pattern: /^\w+$/g })} className="form-control" type="text" placeholder="Serial"/></div>
{errors.Serial?.type === 'pattern' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Onlt text and numbers</p>}
{errors.Serial?.type === 'maxLength' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Only 5 numbers</p>}
{errors.Serial?.type === 'minLength' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Only 5 numbers</p>}
{errors.Serial?.type === 'required' && <p className="errortext"><i className="fas fa-exclamation-circle"></i> Required</p>}
<div className="spacing">
<button className="btn btn-success submitbtn" type="submit">
SEND
</button>
</div>
</label>
</form>
);
在 onSubmit 控制台的箭头函数中 return 字符串中的 ID 和字符串中的序列号,但我的问题是试图将这些值作为函数 FetchRewards(id, serial) 中的参数传递,我试图在提交按钮中使用 onClick,但它 returns: xhr.js:210 GET https://localhost:8000/api/public/validate_ticket?serial=undefined&ticket_id=undefined 500 (Internal Server Error)
当我点击按钮时
尝试更改表单的 onSubmit
你的
<form onSubmit={handleSubmit(onSubmit)}>
至
<form onSubmit={() => handleSubmit(onSubmit)} />
或者只是
<form onSubmit={handleSubmit} />
以这种方式执行函数似乎很奇怪,因为您必须提供回调函数,而不是要执行的代码。
问题的答案是:
const onSubmit = (data) => {
getData(data.id, data.Serial)
}