React hooks 呈现更多 hooks 问题

Question

I have used more than two react hooks together and I get this issue where there is no error with my frontend other than render hooks. I don't know how to resolve this error. I tried even using useState method.

If there is a possible fix can you let me know?

const Login = () => {
  const { register, handleSubmit, setValue } = useForm();
  const onSubmit = useCallback((formData) => {
    const { email, password } = formData;
    console.log(formData);
  }, []);
  const windowWidth = Dimensions.get("window").width;
  const windowHeight = Dimensions.get("window").height;
  const [loaded] = useFonts({
    Lato: require("../assets/fonts/Lato-Regular.ttf"),
  });

  if (!loaded) {
    return null;
  }

  const onChangeField = useCallback(
    (name) => (text) => {
      setValue(name, text);
    },
    []
  );

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

export default Login;

Answer 1

Your app must call the same number of hooks every render. So you need to move

  if (!loaded) {
    return null;
  }

to be below all of your hooks:

const Login = () => {
  const { register, handleSubmit, setValue } = useForm();
  const onSubmit = useCallback((formData) => {
    const { email, password } = formData;
    console.log(formData);
  }, []);
  const windowWidth = Dimensions.get("window").width;
  const windowHeight = Dimensions.get("window").height;
  const [loaded] = useFonts({
    Lato: require("../assets/fonts/Lato-Regular.ttf"),
  });
  const onChangeField = useCallback(
    (name) => (text) => {
      setValue(name, text);
    },
    []
  );

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

  
  if (!loaded) {
    return null;
  }

  return (
    
  );
};

export default Login;