如果有一个自定义钩子也使用了 use Effect，那么 useEffect 是如何被调用的？

Question

const [allrestro, setallrestro] = useState([]);
  const [filteredrestaurant, setfilteredrestaurant] = useState([]);

  const search = useState("");
  [searchValue, setsearchValue] = search;


  useEffect(() => {
    const getRestaurants = async () => {
      const data = await fetch("https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.9188442&lng=75.8148262&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING");
      const json = await data.json();

      setallrestro(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setfilteredrestaurant(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setTimeout(() => {
        
      }, 10000);
      

    }
    getRestaurants();

  }, []);

  



  const isOnline = useOnline();
  if (!isOnline) {
    return <h1>You are offline</h1>
  }

工作正常但是当我这样做时

const Body = () => {
  
  const [allrestro, setallrestro] = useState([]);
  const [filteredrestaurant, setfilteredrestaurant] = useState([]);

  const search = useState("");
  [searchValue, setsearchValue] = search;


  
  const isOnline = useOnline();
  
  if (!isOnline) {
    
    return <h1>You are offline</h1>
  }

  useEffect(() => {
    const getRestaurants = async () => {
      const data = await fetch("https://www.swiggy.com/dapi/restaurants/list/v5?lat=30.9188442&lng=75.8148262&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING");
      const json = await data.json();

      setallrestro(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setfilteredrestaurant(json?.data?.cards[5]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
      setTimeout(() => {
      }, 10000);
      

    }
    getRestaurants();

  }, []);

  

它不起作用！ 如果我在 useEffect 上面调用 useOnline 有什么问题吗

这是 UseOnline Hook

import { useState,useEffect } from "react";

const useOnline=()=>{
    const [state,usestate]=useState(true);
    
    console.log("outside component component")
    useEffect(()=>{
        console.log("outside component");
        window.addEventListener("online",()=>{usestate(true)});
        window.addEventListener("offline",()=>{usestate(false)});
        setTimeout(() => {
            console.log("useOnline useffect")
          }, 5000);
    },[])
    

    return state;
}
export default useOnline;

您能否解释一下如果组件内有多个钩子，钩子是如何调用的？ 组件的循环是为自定义钩子单独运行还是绑定到调用函数？

Answer 1

在调用

useEffect

的组件中调用自定义钩子与在组件主体中调用

useEffect

没有什么不同。自定义钩子旨在封装逻辑，但其他方面的工作原理完全相同。

React 中的一条重要规则是所有hooks 必须在顶层调用，因此您永远不应该在条件内或提前返回后调用它们。例如，如果您拨打以下电话，则违反了规则：

if (!isOnline) { 
  return <h1>You are offline</h1>
}

因为如果

!isOnline

，第二个

useEffect

可能不会被调用。要解决此问题，只需将

useEffect

移至提前返回上方即可。