javascript - useEffect 和 'react-hooks/exhaustive-deps' linting

Question

我包含了一个空数组，因为它应该只运行一次，但是我收到了 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()
}, [])

Answer 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根据当前状态更新状态:

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).

您通常应该在访问当前状态时使用它来更新状态。