React hooks 呈現更多 hooks 問題

Question

我一起使用了兩個以上的反應鈎子，我遇到了這個問題，除了渲染鈎子之外，我的前端沒有任何錯誤。 我不知道如何解決這個錯誤。 我什至嘗試使用useState方法。

如果有可能的解決辦法，你能告訴我嗎？

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

您的應用必須在每次渲染時調用相同數量的掛鈎。 所以你需要移動

  if (!loaded) {
    return null;
  }

低於你所有的鈎子：

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;