React中缺少依赖项：“dispatch”

Question

在我的反应/redux应用程序中，我使用调度来调用每次安装组件时从redux中的状态检索数据的操作。问题正在使用状态发生我的方式不工作

下面是我得到的错误：

React Hook useEffect缺少依赖项：“dispatch”。包括它或删除依赖项数组。像“getInvoiceData”这样的外部作用域值不是有效的依赖项，因为对它们进行变异不会重新呈现组件react HOOK/DEP

这是我的密码：

const TableSection = () => {

  const invoiceData = useSelector((state => state.tables.invoiceData));

  const dispatch = useDispatch() 

  useEffect(() => {
    dispatch(getInvoiceData());
  }, [getInvoiceData]);

(...)

export default TableSection;

Answer 1

这不是一个错误，只是一个警告。

您可以通过在依赖数组中添加调度来解决这个问题。

useEffect(() => {
   dispatch(getInvoiceData());
}, [dispatch]); 

警告消息的第二部分指出，“getInvoiceData”等外部作用域值不是有效的依赖项，因为对它们进行变异不会重新呈现组件react hooks/deps，您还需要从useEffecthook的依赖项数组中删除getInvoiceData函数。

任何在函数组件范围内的，参与响应数据流的，您在use效应的回调函数中使用的，都应该添加到use效应钩子的依赖数组中。

尽管在您的情况下，可以安全地从依赖项数组中省略dispatch函数，因为它保证永远不会更改，但如果您将其添加为依赖项，它仍然不会造成任何伤害。

Answer 2

您需要向dep数组添加dispatch函数：

const TableSection = () => {
  const dispatch = useDispatch() 

  useEffect(() => {
    dispatch(getInvoiceData());
  }, [dispatch]);

将它添加到dep数组是安全的，因为它的标识在渲染中是稳定的，请参阅文档。

注意：像在React的useReucer中一样，返回的调度函数标识是稳定的，不会在重新渲染时更改（除非您更改传递到的存储，这将是非常不寻常的）。