如何在React中将React Hook Form表单参数传递给REST API

错误原因 #

• 页面首次加载时触发的useEffect中调用getData()没有传入id和serial参数，直接生成了携带undefined的请求地址
• 你没有在React Hook Form提供的onSubmit回调中调用接口，而是单独给提交按钮绑定onClick事件，此时无法获取到经过表单校验的合法值，导致参数为空

修复方案 #

1. 移除无用的useEffect逻辑，你不需要页面初始化就发起接口请求，仅当用户提交表单且校验通过后才需要调用接口
2. 在onSubmit回调中直接调用getData，传入表单收集到的id和Serial值，注意字段名大小写和你注册表单时的命名保持一致
3. 补充异步请求的异常捕获逻辑，避免接口报错导致页面崩溃

修复后的核心代码 #

// 移除下面这段无用的useEffect代码
/*
useEffect(()=>{
  if(!existRewards) getData();
},[existRewards])
*/

// 修改onSubmit函数为异步，传入表单参数调用接口
const onSubmit = async (data) => {
  try {
    // 字段名和register时的命名保持一致，分别为id、Serial
    await getData(data.id, data.Serial);
  } catch (err) {
    // 此处可补充接口报错的用户提示逻辑
    console.error('请求失败：', err);
  }
};

你也可以优化接口的参数拼接逻辑，避免手动拼接字符串出错：

export const FetchRewards = async (id, serial) => {
  const res = await axios.get(`${URL}/api/public/validate_ticket`, {
    params: {
      serial: serial,
      ticket_id: id
    }
  });
  if (res.status !== 200) return [];
  return res.data;
};

修改后点击提交按钮，React Hook Form会先校验表单字段是否符合规则，校验通过后触发onSubmit回调，传入合法的表单值再发起请求，就不会出现undefined参数的问题。

内容的提问来源于stack exchange，提问作者Javier