React Native中调用resetForm()后Formik字段仍残留错误的问题

看起来你遇到的问题核心是表单的touched状态没有被完全重置——虽然你调用了resetForm()，但很多表单库（比如React Hook Form）默认的重置逻辑可能只清空了字段值，却保留了touched（字段是否被触碰过）和errors状态。当你返回表单页面时，这些残留状态会触发你写的错误提示逻辑，导致之前触碰过的字段莫名显示错误。

给你几个具体的解决方案，按需选择：

1. 强制重置所有表单状态（推荐） #

如果用的是React Hook Form，调用reset时明确指定要重置touched和errors状态：

try {
  const data = await api.post('/auth/signup', { ...values });
  // 一次性重置值、错误状态、触碰状态所有内容
  resetForm({}, { keepErrors: false, keepDirty: false, keepTouched: false });
  navigation.navigate(ROUTES.EMAILCONFIRMATION);
  return data;
} catch (e) {
  setStatus(e.response?.data.message);
}

这里把resetForm移到navigation前面，确保组件卸载前完成状态重置，避免因为组件卸载导致重置逻辑失效。

2. 组件挂载时自动重置表单 #

如果用户大概率会通过返回按钮回到表单页面，可以在组件每次挂载时触发重置，确保进入页面时表单是完全干净的状态：

useEffect(() => {
  // 组件挂载/重新挂载时，重置所有表单状态
  resetForm({}, { keepErrors: false, keepTouched: false });
}, [resetForm]);

这样不管用户是第一次进入还是从其他页面返回，表单都会回到初始状态，不会有残留的touched或errors。

3. 自定义resetForm确保重置所有状态 #

如果你的resetForm是自定义实现的，一定要记得同时清空touched和errors对象，而不只是字段值：

const resetForm = () => {
  setValues(initialValues); // 重置字段值
  setErrors({}); // 清空错误信息
  setTouched({}); // 关键：重置触碰状态
};

这样就能彻底解决返回页面时字段残留错误提示的问题啦～

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