useEffect 和 'react-hooks/exhaustive-deps' linting答案

【问题标题】：useEffect and 'react-hooks/exhaustive-deps' lintinguseEffect 和 'react-hooks/exhaustive-deps' linting
【发布时间】：2020-06-08 04:28:30
【问题描述】：

我包含了一个空数组，因为它应该只运行一次，但是我收到了 linting 警告，因为我没有将 ajaxCallsInProgress 作为依赖项包括在内。我不这样做的原因是，如果我这样做，它会创建一个无限循环。有没有更好的方法来处理这种情况来消除掉毛警告？据我所知，这是非常直接且有效的场景。

useEffect(() => {
     const fetch = async () => {
         // update state to show pending
         setAjaxCallsInProgress(ajaxCallsInProgress + 1)

         try {
             const humans = await getHumans()

             setHumans(humans)
         } catch (error) {
             setError(error)
         } finally {
             setAjaxCallsInProgress(ajaxCallsInProgress - 1)
         }
     }

     fetch()
}, [])

【问题讨论】：

你是用useState()定义setAjaxCallsInProgress和ajaxCallsInProgress吗？
@norbitrial 是的。

标签： javascript reactjs eslint use-effect

【解决方案1】：

状态的递增/递减不需要您知道当前状态，因为setState 有一个callback version，它接收当前状态作为参数并返回下一个状态：

const [ajaxCallsInProgress, setAjaxCallsInProgress] = useState(0);

useEffect(() => {
    const fetch = async () => {
        // update state to show pending
        setAjaxCallsInProgress(current => current + 1)

        try {
            const humans = await getHumans()

            setHumans(humans)
        } catch (error) {
            setError(error)
        } finally {
            setAjaxCallsInProgress(current => current - 1)
       }
   }

    fetch()
}, [])

这将消除对ajaxCallsInProgress 的依赖，同时也是一个best practice，用于根据当前状态更新状态：

如何使用取决于当前状态的值更新状态？

将函数而不是对象传递给setState以确保调用始终使用最新版本的状态（见下文）。

访问当前状态时一般应该使用它来更新状态。

【讨论】：

啊，就是这样。谢谢！