I retrieve some data from an API but when I filter the data to separate the values I get back an empty array...

My component:

export const RestaurantOrderScreen = () => {
  const [menuItems, setMenuItems] = useState([]);
  const [bfastItems, setBfastItems] = useState([]);
  const [lunchItems, setLunchItems] = useState([]);
  const [drinkItems, setDrinkItems] = useState([]);
  const [dinnerItems, setDinnerItems] = useState([]);

  const getAllMenuItems = async () => {
    setMenuItems([]);

    await restaurantMenuItemsApi(10000)
      .then((items) => {
        setMenuItems(items);
      })

      .catch((err) => {
        console.error(err);
      })
      .finally(() => {
        console.log("Restaurant menu items retrieved");
        filterMenuList();
      });
  };

  const filterMenuList = () => {
    console.log("Restaurant menuitems: ", menuItems);
    const bfast = menuItems.filter((item) => item.type === "BREAKFAST");
    const lunch = menuItems.filter((item) => item.type === "LUNCH");
    const dinner = menuItems.filter((item) => item.type === "DINNER");
    const drinks = menuItems.filter((item) => item.type === "DRINKS");
    const dinner = menuItems.filter((item) => item.type === "DINNER");

    setBfastItems(bfast);
    setLunchItems(lunch);
    setDrinkItems(drinks);
    setDinnerItems(dinner);

    console.log("breakfast:", bfastItems);
  };

  useEffect(() => {
    getAllMenuItems();
  }, []);

The data I get back is structured like this:

Object {
    "id": 10007,
    "menuItemByRestaurant": 10000,
    "naam": "British Breakfast",
    "price": 5.24,
    "type": "BREAKFAST",
  },

I also tried to set a timeout in the finally catch over filterMenuItems() but then I had the same result.

CodePudding user response：

The best way to do is,

useEffect(() => {
   filterMenuList();
},[menuItems]}