useEffect 和 'react-hooks/exhaustive-deps' 检测

Question

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

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()
}, [])

Answer 1

In-/decrementing 状态不需要你知道当前状态，因为 setState 有一个 callback version 接收当前状态作为参数， returns下一个状态：

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 用于根据当前状态更新状态：

How do I update state with values that depend on the current state?

Pass a function instead of an object to setState to ensure the call always uses the most updated version of state (see below).

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

useEffect 和 'react-hooks/exhaustive-deps' 检测

useEffect and 'react-hooks/exhaustive-deps' linting

javascript

reactjs

eslint

use-effect