Redux Action Creator 导致无限循环答案

【问题标题】：Redux Action Creator Causing Infinite LoopRedux Action Creator 导致无限循环
【发布时间】：2019-12-13 17:10:57
【问题描述】：

我的应用程序使用 eBay API 并允许用户保存最喜欢的项目列表。

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

我需要使用来自 eBay API 的更新信息来显示保存的收藏夹，因为当用户选择收藏夹时，保存的数据（例如价格、出价数量）是静态保存的。

我已经为数据库设置了一个名为 getUpdates 的单独操作创建者，它可以进行这样的调用，并且调用工作正常。

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

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

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

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

我正在尝试从收藏夹状态中获取每个 itemId 以传递给我的 ebay api 以检索每个项目的更新数据。

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

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 挂钩之一中，就像这样......这也会导致无限循环。

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 错误。有什么想法吗？

【问题讨论】：

标签： javascript node.js reactjs redux

【解决方案1】：

这已通过调整 useEffect 挂钩中的第二个参数来解决。

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

【讨论】：