Redux Action Creator导致无限循环

Question

我的应用程序使用eBay应用程序接口，并允许用户保存收藏项列表。

我将用户的收藏夹数据存储在数据库的用户字段中，其中包括产品的商品ID。

我需要显示保存的收藏夹，但从eBay应用程序接口更新的信息，因为保存的数据(如价格，出价数量)是静态保存时，用户选择一个收藏。

我已经为数据库设置了一个单独的动作创建器，名为getUpdates，它会像这样进行调用，而且调用效果很好。

ebayapi.com/itemID=id2342342,id3234234,id82829294,id234234234

在my Favorites组件中，我首先调用数据库以获取用户最喜欢的项目。

useEffect(() => {
    props.getFavorites(props.loggedUser.id);
  }, [props.loggedUser.id]);

这将成功返回并建立我的favorites状态，其中包括用户最喜欢的项目的列表。

我尝试将每个itemId从favorites状态传递给我的ebay api，以检索每个商品的更新数据。

现在，当我调用我的getUpdates动作创建器执行如下所示的操作时，我得到了一个无限循环，尽管它将数据正确地存储在我定义的新状态字段中

const Favorites = props => {
  useEffect(() => {
    props.getFavorites(props.loggedUser.id);
  }, [props.loggedUser.id]);

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

  const mapFAVS = props.favorites;
  const data = Array.from(mapFAVS); //the favorites state is an array of objects so transforming data
  const updatedFavs = data.map(item => item.id); //strips out the item id's
  const formatFavs = updatedFavs.map(id => id.join(",")); 
  props.getUpdates(formatFavs);  //updates favUpdates state

我试图改变这一点，使getUpdates调用位于一个useEffect钩子中，就像this...which一样，它也会导致无限循环。

const Favorites = props => {
  useEffect(() => {
    props.getFavorites(props.loggedUser.id);
  }, [props.loggedUser.id]);

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

  const mapFAVS = props.favorites;
  const data = Array.from(mapFAVS);
  const updatedFavs = data.map(item => item.id);
  const formatFavs = updatedFavs.map(id => id.join(","));

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

如果我删除第二个props参数，则不会调用操作创建器，并且在后端出现axios错误。有什么想法吗？

Answer 1

这是通过调整useEffect钩子中的第二个参数解决的。

useEffect(() => {
    props.getUpdates(formatFavs);
  }, [props.favorites]);