Redux Action Creator 导致无限循环

Question

My application uses the eBay API and allows a user to save a list of favorite items.

I'm storing the user's Favorites data which includes the item ID for a product in a user field in my database.

I need to display the saved favorites yet with updated information from the eBay API, since the data saved (such as price, number of bids) is saved statically when a user selects a Favorite.

I've set up a separate action creator called getUpdates to the database which makes a call like this, and the call works fine.

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

In my Favorites component, i begin by making a call to the database to get the user's favorite items.

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

This successfully returns and established my favorites state, which includes a list of the user's favorite items.

I'm trying to take each of the itemId's from the favorites state to pass to my ebay api to retrieve the updated data for each item.

Now, when I do something like what is shown below with a call to my getUpdates action creator...i'm getting an infinite loop, although it is storing the data properly in a new state field that I've defined 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

I tried to change this so that the getUpdates call was within one of the useEffect hooks, like this...which also causes an infinite loop.

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]);

If i remove the second props argument the action creator does not get called and there is an axios error on the backend. Any ideas?

Answer 1

This was solved by adjusting the second argument in the useEffect hook.

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