如何正确使用钩子？

Question

我有问题

1-我定义了一个从API获取数据并在useEffect中调用它的函数，它工作正常 但是我在VScode中得到了这个警告。

React Hook React.useEffect缺少依赖项：'getOpenOrders'。 要么包含它，要么删除依赖项数组。

2-我在FlatList中实现了分页，因此，当用户到达数据列表的末尾时，我调用一个函数来增加当前页面，并基于当前页面更新，getOpenOrders再次获取，因为我通过了{ {1}}使用对依赖项数组的效果

所以这里的问题是currentPage，应该将以前的数据与新数据联系起来，所以我使用getOpenOrders方法，

效果很好，但是有一段时间我收到警告，告诉我那里有重复的数据， 而且当我使用跨页Concat无法正常工作时，由于Flatlist keyExtractor问题或其他原因，我遇到了一个大错误，

这里的任何一位英雄都可以查看我的代码，并告诉我这里出什么问题了吗 [...old, new]

代码段

1 - 2

Answer 1

对于问题1：

• 将依赖项添加到数组：

  React.useEffect(() => {
    getOpenOrders();
  }, [currentPage, getOpenOrders]);
  

• 或使用@Matt Aft回答的eslint规则，不会对您的用例产生影响

对于问题2： 我建议使用Set删除重复项：

   setOpenedAppointment((prevOpenedOrders) =>
      Array.from(new Set([...prevOpenedOrders, ...allOpenedOrders]))
    );

这将用扩展语法（...）合并新订单和旧订单，并通过创建新的集合来删除重复项。 （集合仅允许唯一的项目，因此将删除重复项。然后使用Array.from将其转换回Array，以便可以像以前一样使用

Answer 2

我认为您在第二个数组上缺少散布运算符：

setOpenedAppointment((prevOpenedOrders) =>[...prevOpenedOrders, ...allOpenedOrders]);

问题1也是由于您启用了react-hooks/exhaustive-deps规则，基本上有两种方法可以解决此问题：

1. 将getOpenOrders包装在useCallback中，并将其添加到useEffect中的dep数组中
2. 禁用该行的短毛猫

 React.useEffect(() => {
   getOpenOrders();
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }, [currentPage]);