在 React 表单中实现 USD 与 MXN 双向联动汇率计算时，若未加防抖或值比对，useEffect 相互触发会导致无限重渲染循环；本文提供基于 useForm 的可靠解决方案，通过数值一致性校验阻断无效更新。
在 react 表单中实现 usd 与 mxn 双向联动汇率计算时，若未加防抖或值比对，`useeffect` 相互触发会导致无限重渲染循环；本文提供基于 `useform` 的可靠解决方案，通过数值一致性校验阻断无效更新。
在构建实时汇率换算器时，常见的需求是：用户修改任一货币输入框（如 USD 或 MXN），另一方自动按当前汇率同步更新。但直接为两个输入字段分别设置 useEffect 并调用 setValue，极易引发无限更新循环——MXN 变化 → 触发 USD 更新 → USD 变化 → 再次触发 MXN 更新 → 循环往复。
根本原因在于：setValue 会触发表单状态更新，进而使 watch() 返回的新值再次满足 useEffect 的依赖条件，形成闭环。单纯依赖 exchangeRate 或输入值本身无法打破该循环。
✅ 正确解法是：在每次 setValue 前，严格比对目标值是否已等于当前实际值。只有当计算结果与当前字段值不一致时，才执行更新。这能有效过滤掉由反向 Effect 引起的“冗余赋值”。
以下是优化后的核心代码（适配 React Hook Form v7+）：
const {
register,
handleSubmit,
watch,
setValue,
formState: { errors },
} = useForm<QuoterInputs>();
const usInput = watch('usInput');
const mxInput = watch('mxInput');
// MXN → USD：仅当计算值 ≠ 当前 USD 值时更新
useEffect(() => {
if (mxInput > 0 && exchangeRate) {
const calculatedUsd = mxInput / parseFloat(exchangeRate);
// 关键防护：避免因浮点精度导致误判，建议使用近似相等判断
if (!Number.isNaN(calculatedUsd) && Math.abs(calculatedUsd - usInput) > 1e-6) {
setValue('usInput', calculatedUsd, { shouldValidate: false });
}
}
}, [exchangeRate, mxInput, usInput, setValue]);
// USD → MXN：同理校验
useEffect(() => {
if (usInput > 0 && exchangeRate) {
const calculatedMxn = usInput * parseFloat(exchangeRate);
if (!Number.isNaN(calculatedMxn) && Math.abs(calculatedMxn - mxInput) > 1e-6) {
setValue('mxInput', calculatedMxn, { shouldValidate: false });
}
}
}, [exchangeRate, usInput, mxInput, setValue]);⚠️ 注意事项：
- 浮点数精度陷阱：=== 比较浮点数易出错（如 0.1 + 0.2 !== 0.3），推荐使用 Math.abs(a - b) < ε 进行容差比较（示例中采用 1e-6）；
- 避免重复验证：传入 { shouldValidate: false } 防止 setValue 触发不必要的校验逻辑，提升性能；
- 空值/非法值防护：增加 exchangeRate 存在性检查及 isNaN 判断，防止 parseFloat(undefined) 返回 NaN 导致异常；
- 用户交互友好性：可配合 useRef 记录最近一次手动输入的字段名，在 Effect 中跳过由程序触发的更新，实现“以用户操作为准”的单向优先逻辑（进阶优化）。
总结：双向联动的本质是状态同步而非无条件覆盖。通过数值一致性校验这一轻量级守卫机制，即可彻底消除无限循环，同时保持响应式体验的流畅与准确。
