How to call api inside of a loop and perform action on it inside of useEffect React Native

user_16869852 0
Viewed 58

Here is my scenario:

I'm having a cart object in Redux store having information in the form of array of objects having sellerId and the array of products, and I want to map on each object to get sellerId and then fetch seller's data from API on page load.

Here's my code

const [uniqueSellers, setUniqueSellers] = useState([]);

  useEffect(() => {
    const uniqueSellerIds = [];
    cart.filter((item) => {
      if (!uniqueSellerIds.includes(item.sellerId)) {
        uniqueSellerIds.push(item.sellerId);
      }
    });

    if (uniqueSellerIds.length === 1) setItems(["Seller's delivery"]);
    uniqueSellerIds.map((sellerId) =>
      axios.get(`${devBaseURL}/sellers/${sellerId}`).then((res) => {
        setUniqueSellers((prev) => [
          ...prev,
          {
            sellerId: res.data.data[0]._id,
            sellerProvince: res.data.data[0].businessAddress.province,
          },
        ]);
      }),
    );

    // Here I want to perform some operations on uniqueSellers state, but it's not available here
    console.log('uniqueSellers: ', uniqueSellers); // logs empty array

    setLoading(false);
    return () => {
      setUniqueSellers([]);
    };
  }, []);
use-effect reactjs
1 Answers

Mutating state is an async process. Fetch operations are also async. So, your console log always executes before your axios call and setUniqueSellers hook.

Listen changes in uniqueSellers array inside another useEffect by giving it as a dependency.

 useEffect(() => {

 console.log(uniqueSellers); //will log after every change in uniqueSellers


 }, [uniqueSellers])
user_70614830
Related