Реагировать: нужен более быстрый способ фильтрации данных и setState

Question

Мне нужно составить список меню для ресторанного приложения, и данные меню разделены на американские, китайские, индийские, итальянские . Мне нужно l oop поверх всего этого, чтобы каким-то образом отобразить его в меню типа scrollspy. Для этого я настроил бэкэнд для отправки ВСЕХ ЭЛЕМЕНТОВ сразу , и мне нужно отфильтровать и отсортировать его по категории на стороне реакции.

СТРУКТУРА ДАННЫХ:

{
   _id: 5eef61450bd95e1f5c8f372f
   name: "Burger"
   category: "American"
   price: "100"
   isVeg: false
   __v: 0
}

То, как я делаю, кажется слишком медленным, и я считаю, что ДОЛЖЕН БЫТЬ БЫСТРЕЕ / ЭФФЕКТИВНО . Пожалуйста, предложите, потому что из-за моего пути меня рвет.

const CheckForms = () => {
    const [american, setAmerican] = useState([]);
    const [italian, setItalian] = useState([]);
    const [indian, setIndian] = useState([]);
    const [chinese, setChinese] = useState([]);
    
    const fetchList = async () => {
        try {
            const res =  await axios.get(`http://localhost:5000/api/items`);
            const list =  res.data.response;  
            let ch = [];
            let ind = [];
            let am = [];
            let it = [];
            list.forEach(function(each){
                if (each.category === "Chinese") ch.push(each)
                else if (each.category === "Indian") ind.push(each)     
                else if (each.category === "American") am.push(each)     
                else if (each.category === "Italian") it.push(each)     
                else console.log('undefined category');
            });
            setAmerican(am);
            setIndian(ind);
            setChinese(ch);
            setItalian(it);
        } catch (err) {
            console.log(err.response);
        };
    };
    useEffect(()=> {
        fetchList();
    }, []);

    let render;
    if (indian.length > 0 && american.length > 0 && chinese.length > 0 && italian.length > 0) {
        render = (
            /*********************************
             *  AND FURTHER RENDERING LOGIC :( 
             ********************************/
        );
    };

Answer 1

Вы можете попробовать уменьшить:

const list = [
  { category: 'Chinese', name: 'one-1' },
  { category: 'Chinese', name: 'one-2' },
  { category: 'Indian', name: 'two' },
];
const groups = list.reduce(
  (result, item) =>
    result.set(
      item.category,
      (result.get(item.category) || []).concat(item)
    ),
  new Map()
);
console.log('Chinese',groups.get('Chinese'));
console.log('Indian',groups.get('Indian'));