使用React 16.8.6(在之前的版本16.8.3上很好),当我试图阻止fetch请求上的无限循环时,我得到了这个错误:

./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

我一直无法找到一个解决办法来停止这个无限循环。我想远离使用useReducer()。我确实找到了关于'筋疲力尽-deps' lint规则#14920的讨论[ESLint]反馈,其中一个可能的解决方案是,如果你认为你知道你在做什么,你可以总是// ESLint - disabled -next-line react-hooks/详尽-deps。我对我正在做的事情没有信心,所以我还没有尝试实现它。

我有这个当前的设置,React钩子useEffect连续运行永远/无限循环,唯一的评论是关于useCallback(),我不熟悉。

我目前如何使用useEffect()(我只想在开始时运行一次,类似componentDidMount()):

useEffect(() => {
    fetchBusinesses();
  }, []);
const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };

当前回答

如果您没有在除效果之外的任何地方使用fetchBusinesses方法,您可以简单地将其移动到效果中并避免警告

useEffect(() => {
    const fetchBusinesses = () => {
       return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };
  fetchBusinesses();
}, []);

然而,如果您在效果之外使用fetchBusinesses,则必须注意两件事

是否有任何问题,你不传递fetchBusinesses作为方法时,它被使用在装载与它的封闭? 你的方法是否依赖于它从封闭包中接收到的一些变量?你不是这样的。 在每次渲染时,fetchBusinesses将被重新创建,因此将它传递给useEffect将会导致问题。因此,如果要将fetchBusinesses传递给依赖数组,首先必须记住它。

总而言之,我想说的是,如果你在useEffect之外使用fetchBusinesses,你可以使用// eslint-disable-next-line react-hooks/ -deps禁用该规则,否则你可以将方法移动到useEffect内部

要禁用规则,可以这样编写

useEffect(() => {
   // other code
   ...
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) 

其他回答

本文是关于使用钩子获取数据的很好的入门读物:https://www.robinwieruch.de/react-hooks-fetch-data/

本质上,在useEffect中包含fetch函数定义:

useEffect(() => {
  const fetchBusinesses = () => {
    return fetch("theUrl"...
      // ...your fetch implementation
    );
  }

  fetchBusinesses();
}, []);

这不是一个特定于问题用例的答案,而是更普遍的情况,并涵盖了useEffect或提取和导入不工作的情况。 useRef senario:

有时情况是,useEffect应该有一个空数组,你仍然想在useEffect部分的状态中使用,但仍然不想将它们作为依赖注入,你也可以尝试useCallback,现在react抱怨useCallback的依赖,你卡住了。 在这种情况下,在某些情况下可以使用useRef。例如:

const locationRef = useRef(location);
useEffect(()=>{
const qs = locationRef.current.search
...
},[])

在使用这种技术时,您应该小心,并注意useRef不会激活渲染进程。

在我的例子中,它对我的局部变量组织有这个警告,当我把组织放在依赖数组中时,useEffect将获取无限。因此,如果你有一些像我这样的问题,使用useEffect和依赖数组并拆分:

因为如果您有多个修改状态的API调用,它会多次调用useEffect。

来自:

  const { organization } = useSelector(withOrganization)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getOrganization({}))
    dispatch(getSettings({}))
    dispatch(getMembers({}))
  }, [dispatch, organization])

To:

  const { organization } = useSelector(withOrganization)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getOrganization({}))
    dispatch(getSettings({}))
  }, [dispatch, organization])

  useEffect(() => {
    dispatch(getMembers({}))
  }, [dispatch])

你可以通过传递一个引用来消除这个Es-lint警告:

下面提到的例子,但是你可以在这个链接上观看解决方案:https://www.youtube.com/watch?v=r4A46oBIwZk&t=8s

警告: 第13:8行:反应。useEffect缺少依赖项:'history'和'currentUser?.role'。要么包含它们,要么删除依赖数组react-hooks/ exhaustion -deps

React.useEffect(() => {
    if (currentUser?.role !== "Student") {
        return history.push("/")
    }
}, [])

解决方法: 步骤1:将业务逻辑移到单独的const中。

现在的警告是:React Hook React。useEffect有一个缺失的依赖:' rolecheck '。

const roleChecking = () =>{
   if (currentUser?.role !== "Student") {
        return history.push("/")
    }
}

React.useEffect(() => {
    roleChecking()
}, [])

最后一步是创建对函数的引用:

  const roleRef = React.useRef();

  const roleChecking = () => {
    if (currentUser?.role !== "Student") {
      return history.push("/");
    }
  };
  roleRef.current = roleChecking;

  React.useEffect(() => {
   return roleRef.current();
  }, [currentUser?.role]);

使用UseEffect fetchBusinesses调用UseEffect()中的function declare,在调用函数名后声明一个const变量,

useEffect(()=>{
const fetchBusinesses=()=>{
   console.log(useeffect fetchbussinesses functions)
}
 fetchBusinesses();
},[declare the variable used in useeffect hooks ])