react-hook-form多页表单结合数组的校验问题

嘿，我太懂你这个头疼的问题了——多页表单来回切换的时候，react-hook-form总提前校验还没碰过的页面，本来想自由切换结果被卡死，真的烦！

咱们核心要解决的就是：只校验用户当前所在页面的字段，未访问的页面字段暂时不做校验，具体可以这么搞：

1. 放弃自动全局校验，手动控制校验时机 #

别直接用handleSubmit绑定Next按钮了，咱们自己写点击事件，根据当前页面触发对应字段的校验：

const handleNext = async () => {
  let isValid = true;
  // 只校验当前页面的字段
  if (currentPage === 1) {
    // 校验第一页的name字段
    isValid = await trigger('name');
  } else if (currentPage === 2) {
    // 先检查字段数组有没有至少一个元素
    const items = watch('items');
    if (items.length === 0) {
      setError('items', { message: '至少得添加一个项目哦' });
      isValid = false;
    } else {
      // 校验数组里的每个输入框
      isValid = await trigger('items.*.value');
    }
  }

  // 校验通过再切页面
  if (isValid) {
    setCurrentPage(prev => prev + 1);
  }
};

2. 给必填规则加页面判断（可选但更稳妥） #

为了避免不小心触发全局校验时出错，咱们可以给字段的required规则加个页面判断，只有在当前页是对应页面时，才要求必填：

// 第一页的name输入框
<input
  {...register('name', {
    required: currentPage === 1 ? '请输入名称' : false,
  })}
  placeholder="Enter name"
/>

// 第二页数组里的输入框
{watch('items').map((_, index) => (
  <input
    key={index}
    {...register(`items.${index}.value`, {
      required: currentPage === 2 ? '请输入项目内容' : false,
    })}
    placeholder="Enter item"
  />
))}

3. 切回上一页时清除错误（提升体验） #

从第二页回到第一页时，把第二页的错误提示清掉，不然留在页面上会很奇怪：

const handleBack = () => {
  setCurrentPage(prev => prev - 1);
  // 清除当前页面外的错误，或者直接清所有错误
  clearErrors('items');
};

这样调整之后，你就可以在第一页和第二页自由切换了——只有当你在第二页点击Next时，才会校验字段数组的规则，完全符合你的需求～

备注：内容来源于stack exchange，提问作者SeanWM