React Hook useEffect 缺少依赖项 Props答案

【问题标题】：React Hook useEffect has a missing dependency PropsReact Hook useEffect 缺少依赖项 Props
【发布时间】：2020-11-22 01:52:59
【问题描述】：

在我的 react/redux 应用程序中，每次安装组件时，我都会调用一个操作来从 redux 中的状态检索数据。我的方法不行

以下是我得到的错误：

React Hook useEffect 缺少一个依赖项：'props'。包括它或删除依赖数组。但是，“道具”会当 any 属性改变时改变，所以首选的修复是解构 useEffect 调用之外的“道具”对象并引用那些 useEffect 中的特定道具 react-hooks/exhaustive-deps

这是我的代码：

import { getInvoiceData } from "../../actions/tables"

const TableSection = (props) =>{

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


  const classes = useStyles();

(...)

TableSection.propTypes = {
  invoiceData: PropTypes.object
};

const mapStateToProps = (state) => ({
  invoiceData: state.tables.invoiceData,
});

export default connect(mapStateToProps, { getInvoiceData })(TableSection);

【问题讨论】：

兄弟是 react-redux 的钩子，为什么使用 connect intsead 使用 useSelector 和 useDispatch
我不熟悉useSelector或useDispatch的机制，也许你可以用上面的代码演示一下。

标签： reactjs react-redux react-hooks use-effect

【解决方案1】：

您传递给useEffect() 的依赖数组是空的，但您在其中使用了props. getInvoiceData()，所以它缺少props。像这样添加它：

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

最好解构你的道具：

const TableSection = ({invoiceData , getInvoiceData}) =>{

  useEffect(() => {
   getInvoiceData();
  }, [getInvoiceData]);
  
  // Use invoiceData here
  console.log(invoiceData);

依赖项用于让useEffect() 知道它是否应该再次触发。由于您的getInvoiceData 是函数，因此在这种情况下它只会触发一次，就像componentDidMount() 一样。

【讨论】：

那么，在使用你使用的解构器时，如何最好地使用来自 redux 状态的 invoiceData 属性？
更新了答案以包含 invoiceData。这适用于您传递给组件的任何道具，无论是通过其父级还是 redux
最好用本地函数包裹props.getInvoiceData();。
我认为接受的答案应该更改为带有 useSelector 和 useDispatch 钩子的答案。因为@Emre-Koc 的回答不是最佳实践。在依赖数组中包含函数将导致函数在每次渲染时重新声明。当您无法通过 useCallback 包装它或在 useEffect 中声明函数时，这并不理想。您需要以某种方式记住函数引用。见：related official react doc

【解决方案2】：

使用像 useSelector 和 useDispatch 这样的 react-redux 钩子将最大限度地减少您的工作时间，这里是带有 react-redux 钩子的代码：

import { getInvoiceData } from "../../actions/tables"
import {useSelector ,useDispatch} from "react-redux"

const TableSection = (props) =>{
const {invoiceData} = useSelector(state=>state.tables)
const dispatch = useDispatch()

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


  const classes = useStyles();

return (<div>
{// here do something with invoiceData}
{invoiceData && invoiceData.map(...)}
</div>)
}
TableSection.propTypes = {
  invoiceData: PropTypes.object
};

export default TableSection;

【讨论】：