在组件挂载后使用 useEffect 调用 Redux-Thunk Action。但出现问题：React Hook useEffect 缺少依赖项

Question

我需要在组件挂载后调用 API。但我正在使用功能组件。因此，我使用如下的 useEffect 钩子。

function ReportPage({ getAlertAuditLogs, getSensors, getUsers }) {
  
  ...
  
  useEffect(() => {
    getAlertAuditLogs()
    getSensors()
    getUsers()
  }, [])
  
  ...
  
}

但我收到了通知：

React Hook useEffect 缺少依赖项：“getAlertAuditLogs”、“getSensors”和“getUsers”。要么包含它们，要么删除依赖数组。如果“getAlertAuditLogs”更改过于频繁，请找到定义它的父组件并将该定义包装在 useCallback react-hooks/exhaustive-deps 中

这 3 个 api 没有任何参数。我该如何解决这个问题？

PS : getAlertAuditLogs 是 redux 操作，如下所示

import { reportConstants } from "../_constants"
import { alertAuditLogsService } from "../_services"

export const reportActions = {
  getAlertAuditLogs
}

function getAlertAuditLogs() {
  return (dispatch) => {
    dispatch(request())

    alertAuditLogsService.getAlertAuditLogs().then(
      (alertAuditLogs) => dispatch(success(alertAuditLogs.docs)),
      (error) => dispatch(failure(error.toString()))
    )
  }

  function request() {
    return { type: reportConstants.GET_ALERT_AUDIT_LOGS_ALL_REQUEST }
  }
  function success(alertAuditLogs) {
    return { type: reportConstants.GET_ALERT_AUDIT_LOGS_ALL_SUCCESS, alertAuditLogs }
  }
  function failure(error) {
    return { type: reportConstants.GET_ALERT_AUDIT_LOGS_ALL_FAILURE, error }
  }
}

Answer 1

编译器建议 - 函数的调用应该在 useEffect 参数中：

为了提高效率（类似于缓存） - 只需将 useCallback() 包装到每 3 个函数中：

这在将回调传递给优化的子组件时很有用 依赖于引用相等来防止不必要的渲染

const getAlertAuditLogs = useCallback(
  () => {
    your function
  },
  [(here params from your functions - but you said there is paramteless)],
);

function ReportPage({ getAlertAuditLogs, getSensors, getUsers }) {
  
  ...
  
  useEffect(() => {
    getAlertAuditLogs()
    getSensors()
    getUsers()
  }, [getAlertAuditLogs, getSensors, getUsers ])
  
  ...
  
}