why console gives in this sequence?

Viewed 32

I am making a mern ecommerce website i just want to see how useEffect works so i console.log in some part of useEffect and loadFilteredResults i saw that ---> initial entry skip entry1

screen shot

but i think it shoud be--> initial entry entry1 skip

why console give this?? i am a begginer, i am a self learner , so please if you need any extra info please comment.

code snippet-->

  const loadFilteredResults = (newFilters) => {
          console.log("entry")
        getFilteredProducts(skip, limit, newFilters).then((data) => {
           console.log("entry1")
          if (data.error) {
            setError(data.error);
          } else {
            //console.log(data);
            setFilteredResults(data.data);
            //console.log("size-->");
            //console.log(data.size);
            setSize(data.size);
            setSkip(0);
          }
        });
      };
    ....
    ....
    useEffect(() => {
        init();
        console.log("initial");
        loadFilteredResults(skip, limit, myFilters.filters);
        console.log("skip");
      }, []);

//full code of shop.js

import React, { useEffect, useState } from "react";
import Layout from "./Layout";
import Card from "./Card";
import { getCategories, getFilteredProducts } from "./apiCore";
import Checkbox from "./Checkbox";
import RadioBox from "./RadioBox";
import { prices } from "./fixedPrices";

const Shop = () => {
  const [myFilters, setMyFilters] = useState({
    filters: { category: [], price: [] }
  });
  const [categories, setCategories] = useState([]);
  const [error, setError] = useState(false);
  const [limit, setLimit] = useState(3);//prpduct lesss so use 3 but sir used 6
  const [skip, setSkip] = useState(0);
  const [size, setSize] = useState(0);
  const [filteredResults, setFilteredResults] = useState([]);

  const init = () => {
    getCategories().then((data) => {
      if (data.error) {
        //console.log("error");
        setError(data.error);
      } else {
        //console.log("set");
        //console.log(data);
        setCategories(data);
        //console.log(data);
      }
    });
  };

  const loadFilteredResults = (newFilters) => {
    //console.log(newFilters);
      console.log("entry")
    getFilteredProducts(skip, limit, newFilters).then((data) => {
      console.log("entry1")
      if (data.error) {
        setError(data.error);
      } else {
        //console.log(data);
        setFilteredResults(data.data);
        //console.log("size-->");
        //console.log(data.size);
        setSize(data.size);
        setSkip(0);
      }
    });
  };

  const loadMore = () => {
    console.log("skip"+skip);
    console.log("limit"+limit);
    let toSkip = skip + limit;
    console.log("toSkip"+toSkip);
    getFilteredProducts(toSkip, limit, myFilters.filters).then((data) => {
      //console.log("filter");
      //console.log( myFilters.filters)
      if (data.error) {
        setError(data.error);
      } else {
        //console.log(filteredResults);
        //console.log(data.data);
        setFilteredResults([...filteredResults, ...data.data]);
        //console.log("after");
        //console.log(...filteredResults);
        //console.log(filteredResults);
        //console.log(filteredResults);
        //console.log([...filteredResults])
        //console.log([...filteredResults, ...data.data])
        setSize(data.size);
        setSkip(toSkip);
      }
    });
  };

  const loadMoreButton = () => {
    return (
      size > 0 &&
      size >= limit && (
        <button onClick={loadMore} className="btn btn-warning mb-5">
          load more
        </button>
      )
    );
  };
  useEffect(() => {
    init();
    //console.log(skip);
    console.log("initial");
    loadFilteredResults(skip, limit, myFilters.filters);
    console.log("skip");
  }, []);

  const handleFilters = (filters, filterBy) => {
    //console.log("SHOP", filters, filterBy);
    const newFilters = { ...myFilters };
    //console.log(newFilters);
    newFilters.filters[filterBy] = filters;
    //console.log(typeof(filters));

    if (filterBy === "price") {
      let priceValues = handlePrice(filters);
      newFilters.filters[filterBy] = priceValues;
      //console.log(priceValues);
    }

    //console.log(myFilters.filters);

    loadFilteredResults(myFilters.filters);

    setMyFilters(newFilters);
  };

  const handlePrice = (value) => {
    const data = prices;
    let array = [];
    //console.log(value);
    for (let key in data) {
      if (data[key]._id === parseInt(value)) {
        array = data[key].array;
      }
    }
    return array;
  };

  // const x = (filters)=>{
  //   console.log("filters:"+filters);
  //   handleFilters(filters, "category")
  // }

  return (
    <Layout
      title="Shop Page"
      description="search and buy books of your choice"
      className="container-fluid"
    >
      <div className="row">
        <div className="col-4">
          <h4>Filter by categories</h4>
          <ul>
            {/* below will be show in list show we wrap it in unorder list */}

            <Checkbox
              categories={categories}
              handleFilters={(filters) =>
                handleFilters(filters, "category")
              }
            />
          </ul>

          <h4>Filter by price range</h4>
          <div>
            <RadioBox
              prices={prices}
              handleFilters={(filters) => handleFilters(filters, "price")}
            />
          </div>
        </div>

        <div className="col-8">
          <h2 className="mb-4">Products</h2>
          <div className="row">
            {filteredResults.map((product, i) => (
              <Card key={i} product={product} />
            ))}
          </div>
          <hr />
          {loadMoreButton()}
        </div>
      </div>
    </Layout>
  );
};

export default Shop;
1 Answers

getFilteredProducts must be a Promise. Please read Using promises

Callbacks added with then() will never be invoked before the completion of the current run of the JavaScript event loop.

Related