自定义挂钩中的Useeffect依赖项列表警告

Question

所以我正在构建一个反应应用程序，我试图通过使用axios的自定义钩子简化调用我的后端api。这个钩子保持加载和错误状态，这样我就不必在发出请求的每个组件中保持该状态。它还公开了一个调用Api（）函数，该函数发出实际请求，然后更改钩子中的状态。这是自定义钩子的代码。

import { useState } from 'react'
import axios, { AxiosRequestConfig } from 'axios'

export default <DataType>() => {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [data, setData] = useState<DataType>()

  async function callApi(config: AxiosRequestConfig) {
    setLoading(true)
    setError('')
    try {
      const response = await axios.request<DataType>(config)
      setData(response.data)
    } catch (error) {
      if (error.response) setError(error.response.data.msg)
      else if (error.request) setError('A network error occured')
      else setError('An error occured')
    } finally {
      setLoading(false)
    }
  }

  return {
    data,
    loading,
    error,
    callApi
  }
}

然后，我尝试在我想要发出请求的组件中的useEffect钩子中使用这个callApi（）方法。

const { data: posts, loading, error, callApi } = useApi<Post[]>()

  useEffect(() => {
    callApi({
      url: 'http://localhost:4000/blog'
    })
  }, [])

这是预期的工作，但我的linter（设置与create-react-app）给出了这个警告：

React Hook use效应有一个缺失的依赖项：“调用Api”。要么包括它，要么删除依赖数组report-hoks/详尽-deps如果我要么将call Api添加到依赖数组，要么完全删除依赖数组，将创建一个无限循环，因为call Api更新状态，我只想在挂载时调用api。

如果我删除依赖项列表或将callApi添加到依赖项列表中，那么效果将在无限循环中一直被调用，我只想在mount上调用。

该如何修复此警告，代码是否涉及任何风险（毕竟，linter抱怨是有原因的）？

Answer 1

您的useffect使用自定义挂钩返回的callApi函数。

由于函数可以作为组件中的任何道具或状态进行更改，因此React警告您，如果函数发生更改，则永远不会调用新函数。

如果您想摆脱警告，您应该将该函数添加到第二个参数数组中。

useEffect(() => {
    callApi({
      url: 'http://localhost:4000/blog'
    })
  }, [ callApi ])

Answer 2

这应该起作用：

const callApi = useCallback(async (config: AxiosRequestConfig) => {
  setLoading(true)
  setError('')
  try {
    const response = await axios.request<DataType>(config)
    setData(response.data)
  } catch (error) {
    if (error.response) setError(error.response.data.msg)
    else if (error.request) setError('A network error occured')
    else setError('An error occured')
  } finally {
    setLoading(false)
  }
}), [])

...和...

useEffect(() => {
  callApi({
    url: 'http://localhost:4000/blog'
  })
}, [callApi])

callApi从未更改，因此将其传递给useffect将具有与useffect（…，[]）相同的行为。