Question

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

以下是我遇到的错误：

反应挂钩useEffect缺少依赖项：'props'。包括它或删除依赖项数组。但是，“道具”将当 any 道具更改时更改，因此首选的解决方法是分解 useEffect调用之外的“ props”对象，并引用这些对象使用中的特定道具会影响反应钩/穷举滴

这是我的代码：

public Dog(String nickName, int furLength, String favToy) {
        this.nickName = nickName;
        this.furLength = furLength;
        this.favToy = favToy;
    }
   



   public class Main {


    public static void main(String[] args) {
        Dog d1 = new Dog("Archy", 5, "kong");
        Dog d2 = new Dog("Arnavushik", 3, "socks");
        System.out.println(d1.getFavToy());
        ArrayList DogList = new ArrayList();
        DogList.add(d1);
        DogList.add(d2);
        System.out.println(DogList.get(1));

        }
    }

Answer 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()一样。

Answer 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;

React Hook useEffect缺少依赖项

2 个答案: