Question

我包括了一个空数组，因为它只能运行一次，但是我收到了掉毛警告，因为我没有将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：

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

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

访问当前状态以更新状态时，通常应该使用它。

useEffect和'react-hooks / exhaustive-deps'掉毛

1 个答案: