缺少依赖关系：React 中的"调度"

Question

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

下面是我得到的错误：

React Hook useEffect缺少依赖项："dispatch"。请将其包括在内或删除依赖项数组。像"getInvoiceData"这样的外部作用域值不是有效的依赖项，因为更改它们不会重新呈现组件react hook/exhaust deps

这是我的代码：

const TableSection = () => {
const invoiceData = useSelector((state => state.tables.invoiceData));
const dispatch = useDispatch() 
useEffect(() => {
dispatch(getInvoiceData());
}, [getInvoiceData]);
(...)
export default TableSection;

Answer 1

您需要将dispatch函数添加到dep数组：

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

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

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

Answer 2

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

可以通过在依赖数组中添加dispatch来解决此问题。

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

警告消息的第二部分指出，像"getInvoiceData"这样的外部作用域值不是有效的依赖项，因为更改它们不会重新呈现组件react hook/exhaust deps，您还需要从useEffect钩子的依赖项数组中删除getInvoiceData函数。

在useEffect的回调函数中使用的参与react数据流的功能组件范围内的任何内容都应该添加到useEffect钩子的依赖数组中。

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