I am trying to render this CardsContainerCopy component after making an AJAX call with Redux-thunk.

If I leave the dependencies array in useEffect empty, the component doesn't render at all.

If I add cartItems to the dependencies array, the components will render but the fetchItems function keeps being called infinitely.

Code:

import React, { useEffect, useState } from "react";
import SingleCard from "./SingleCard";
import { createServer } from "miragejs";
import axios from "axios";
import itemsData from "../../config/ItemsData";
import { useDispatch, useSelector } from "react-redux";
import { selectCartItems } from "./shopSlice";

let server = createServer();
server.get("/api/food", itemsData);

const fetchItems = async (dispatch) => {
  const itemsData = await axios.get("/api/food");
  dispatch({ type: "shop/fetchedItems", payload: itemsData.data });
};

const CardsContainerCopy = () => {
  const [items, setItems] = useState([]);

  const dispatch = useDispatch();
  const cartItems = useSelector(selectCartItems);

  useEffect(() => {
    dispatch(fetchItems);
    setItems(cartItems);
  }, [cartItems]);

  return (
    <>
      {items?.map((item, i) => {
        return <SingleCard props={item} key={i} />;
      })}
    </>
  );
};

export default CardsContainerCopy;

CodePudding user response：

Your useEffect function does create an infinite loop, as you're listening to cartItems changes which triggers dispatch again. To avoid infinite re render you can do something like this:

const CardsContainerCopy = () => {
  const [items, setItems] = useState([]);

  const dispatch = useDispatch();
  const cartItems = useSelector(selectCartItems);


  useEffect(()=>{
     dispatch(fetchItems);
  }, [])

  useEffect(() => {
     setItems(cartItems);
  }, [cartItems]);

  return (
    <>
      {items?.map((item, i) => {
        return <SingleCard props={item} key={i} />;
      })}
    </>
  );
};