React Hook Form应用白屏及无限重渲染错误求助

核心问题：无限重渲染的根源 #

浏览器抛出的「Too many re-renders」错误，核心原因是自定义小费输入框的onFocus属性直接执行了状态更新函数，而非传递回调函数：

// 错误写法：每次组件渲染时都会直接调用setTipPercent(null)，触发「状态更新→重新渲染」的无限循环
<input
  type="number" 
  placeholder='Custom' 
  {...register('customTip')} 
  onFocus={setTipPercent(null)} 
/>

每次组件渲染时，setTipPercent(null)会被立即执行，更新tipPercent状态，进而触发组件重新渲染，形成循环最终导致浏览器白屏。

其他潜在问题 #

1. TipButton组件激活状态判断错误：父组件传递的isActive已经是tipPercent === percent的布尔值，但子组件错误地用isActive === value判断，导致激活样式无法正确触发。
2. 无效表单字段赋值：handleTipClick中调用了setValue('tipPercent', value)，但表单并未注册tipPercent字段，属于无效操作。

修复步骤 #

1. 修复onFocus回调 #

将自定义小费输入框的onFocus改为传递箭头函数，确保仅在聚焦时执行状态更新：

<input
  type="number" 
  placeholder='Custom' 
  {...register('customTip')} 
  onFocus={() => setTipPercent(null)} 
/>

2. 修正TipButton激活状态判断 #

修改TipButton组件的className逻辑，直接使用父组件传递的isActive布尔值：

// tipButton.jsx
<button
  type="button"
  onClick={() => onClick(value)}
  className={`tip-button ${isActive ? 'active-button' : ''}`}
>
  {value}%
</button>

3. 删除无效表单赋值 #

移除handleTipClick中多余的无效代码：

const handleTipClick = (value) => {
  setTipPercent(value);
  setValue('customTip', '');
  // 移除下面这行无效代码
  // setValue('tipPercent', value)
};

验证修复 #

完成修改后重新运行应用：

• 浏览器控制台的无限重渲染错误会消失
• 自定义小费输入框聚焦时，会正确清空选中的小费百分比
• 小费按钮的激活样式会正常显示
• 重置按钮功能保持正常

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