React Hook useEffect缺少依赖项道具

Question

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

下面是我得到的错误：

React Hook use效应有一个缺失的依赖项：道具。要么包含它，要么删除依赖数组。然而，当任何道具发生变化时，“道具”都会发生变化，因此首选的修复方法是将“道具”对象的结构分解为在use效应调用之外的对象，并指称在use效应反应挂钩/穷举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);

Answer 1

使用react-redux钩子，如useSelector和useDispatch将最大限度地减少您的工作时间，下面是带有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;

Answer 2

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

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

最好是解构你的道具：

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

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

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