React Hooks渲染异常求助：多Hook联用问题排查与修复

问题根源 #

你的代码违反了React Hook的调用规则：Hook必须在组件的顶层无条件调用，不能被条件语句（比如if (!loaded) return null;）中断。当字体未加载完成时，组件提前返回，导致后续的useCallback、useEffect不会执行；而字体加载完成后这些Hook又会执行，两次渲染的Hook调用顺序不一致，直接触发Hook渲染异常。

具体修复步骤 #

• 调整Hook调用顺序，确保所有Hook在顶层执行：把所有Hook调用移到if (!loaded)判断之前，保证每次渲染时Hook的调用顺序完全一致。
• 补充useCallback的依赖项：onChangeField依赖setValue，必须把它加入依赖数组，避免闭包捕获旧值导致的逻辑异常。
• 优化useForm的register使用方式：不在useEffect中调用register的写法并非最优，推荐直接在表单元素上绑定（如果JSX里需要的话），若需手动控制字段，务必保证依赖项完整。

修正后的完整代码 #

const Login = () => {
  // 所有Hook必须在组件顶层无条件调用
  const { register, handleSubmit, setValue } = useForm();
  const onSubmit = useCallback((formData) => {
    const { email, password } = formData;
    console.log(formData);
  }, []);
  
  // 移到顶层，避免被条件判断中断
  const onChangeField = useCallback(
    (name) => (text) => {
      setValue(name, text);
    },
    [setValue] // 补充依赖setValue
  );

  useEffect(() => {
    register("email");
    register("password");
  }, [register]);

  const windowWidth = Dimensions.get("window").width;
  const windowHeight = Dimensions.get("window").height;
  const [loaded] = useFonts({
    Lato: require("../assets/fonts/Lato-Regular.ttf"),
  });

  // 条件判断放在所有Hook调用之后
  if (!loaded) {
    return null;
  }

  return (
    // 你的表单JSX内容
  );
};

export default Login;

额外说明 #

React Hook的核心规则就是每次渲染时Hook调用顺序必须完全相同，任何条件分支、循环、嵌套函数里的Hook调用都会破坏这个规则，引发难以排查的渲染异常。如果使用ESLint，建议开启eslint-plugin-react-hooks插件，它会自动检测Hook调用的违规情况，提前规避这类问题。

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