React - 错误：渲染的钩子比使用自定义钩子的先前渲染期间更多

Question

我有一个组件，我在其中调用我的自定义钩子。

自定义挂钩如下所示：

import { useQuery } from 'react-apollo';

export function useSubscription() {
  const { loading, error, data } = useQuery(GET_SUBSCRIPTION_BY_ID)

  if (loading) return false
  if (error) return null

  return data
}

然后我正在使用它导致错误的组件是：

export default function Form(props) {
  const router = useRouter();

  let theSub = useSubscription();
  if (theSub === false) {
    return (
      <Spinner />
    )
  } // else I'll have the data after this point so can use it.

  useEffect(() => {

    if (!isDeleted && Object.keys(router.query).length !== 0 && router.query.constructor === Object) {
      setNewForm(false);

      const fetchData = async () => {
        // Axios to fetch data
      };

      fetchData();
    }

  }, [router.query]);

  // Form Base States
  const [newForm, setNewForm] = useState(true);
  const [activeToast, setActiveToast] = useState(false);


  // Form Change Methods
  const handleUrlChange = useCallback((value) => setUrl(value), []);

  const handleSubmit = useCallback(async (_event) => {
    // Submit Form Code
  }, [url, selectedDuration, included, excluded]);


  return (
    <Frame>
      My FORM
    </Frame>

  )


}

有什么想法吗？

Answer 1

第一次渲染组件时可以使用useEffect调用hook。

export default function Form(props) {
  const router = useRouter();
  const [theSub, setTheSub] = useState(null);
  useEffect(() => { setTheSub(useSubscription()); }, []);
  
  if (theSub === false) {
    return (
      <Spinner />
    )
  } // else I'll have the data after this point so can use it.

  // I have some other states being set and used related to the form e.g:
  // const [whole, setWhole] = useState(true);

  return (... The form ...)