ReactJS使用useEffect函数时触发两个警告的问题求助

问题成因说明 #

• 第一个组件卸载更新状态的警告：你当前的mounted判断仅在调用异步函数前执行，此时组件必然处于挂载状态，判断逻辑完全未生效。异步请求返回后执行状态更新时，组件可能已经卸载，而你没有在更新状态的节点做挂载判断，也没有取消未完成的请求。
• 第二个依赖缺失警告：useEffect的依赖数组没有包含用到的外部函数getAllAccounts、getBeneficiaries，不符合React Hooks的依赖规则。如果直接将这两个函数加入依赖数组，由于组件每次渲染都会生成新的函数引用，会导致useEffect重复触发。

解决方案 #

第一步：稳定外部函数引用，解决依赖警告 #

如果两个API函数不需要用到组件内的state/props，直接将函数定义移到组件外部，函数引用会永久稳定。
如果需要用到组件内的状态/属性，用useCallback包裹两个函数，将函数用到的所有外部依赖补全到useCallback的依赖数组中，保证函数引用仅在依赖变化时才更新。
示例：

// 用useCallback包裹API函数，引用稳定
const getAllAccounts = useCallback(async (type, signal) => {
  try {
    // 原有请求逻辑新增传入signal参数，支持取消请求
    const res = await fetch('/你的接口地址', { signal })
    const data = await res.json()
    setAccounts(data)
  } catch (err) {
    // 忽略请求取消的报错
    if (err.name !== 'AbortError') {
      console.error('请求失败', err)
    }
  }
}, [/* 此处补全函数用到的所有外部state/props */])
// getBeneficiaries同理做相同处理

第二步：调整异步逻辑，避免卸载后更新状态 #

优先使用AbortController直接取消未完成的请求，比mounted标记更规范，还能减少不必要的网络开销，调整后的useEffect代码如下：

useEffect(() => {
  const controller = new AbortController()
  // 将signal传入请求，支持取消
  getAllAccounts("load", controller.signal)
  getBeneficiaries(controller.signal)

  return () => {
    // 组件卸载时取消所有未完成的请求
    controller.abort()
  }
}, [getAllAccounts, getBeneficiaries]) // 稳定后的函数加入依赖数组，不会重复触发

如果不想修改原有API函数的内部逻辑，也可以在异步请求返回后、更新状态前加挂载判断：

useEffect(() => {
  let mounted = true
  const fetchData = async () => {
    const accountsData = await getAllAccounts("load")
    const beneficiariesData = await getBeneficiaries()
    // 仅在组件挂载时更新状态
    if (mounted) {
      setAccounts(accountsData)
      setBeneficiaries(beneficiariesData)
    }
  }
  fetchData()
  return () => {
    mounted = false
  }
}, [getAllAccounts, getBeneficiaries])

内容的提问来源于stack exchange，提问作者Matt