Как использовать функции Nested map () при получении данных из Firebase Firestore

Question

Я изучаю React и у меня есть несколько меню и sub_menu элементов, я сделал две разные коллекции в Firestore и извлекаю из них данные.Я хотел показать меню и в соответствии с их родительским идентификатором их подменю.

Я использовал JavaScript map () внутри map () , и мой код работает хорошо, но я хотел знать, что этоМой путь прав, потому что я получаю это предупреждение в консоли:

Строка 35: Ожидается, что в конце стрелки будет возвращено значение функции array-callback-return

Что я делаю не так?

project_action.jsx (файл действия с использованием кода Redux)

// FETCHING HEADER MENU ITEMS
export const fetchMenuItems = () => {
    return (dispatch, getState, { getFirebase, getFirestore }) => {
        // MAKE ASYNC CALL
        const firestore = getFirestore();
        let mainData = [];
        let subMenuData = [];
        // GETTING MAIN MENUES
        firestore.collection('header_menu_items').orderBy('item_pos', 'asc').get().then(querySnapshot => {
            querySnapshot.forEach(doc => {
                mainData.push({
                    item_id: doc.id,
                    item_name: doc.data().item_name,
                    item_link: doc.data().item_link,
                    is_active: doc.data().is_active,
                    has_sub_menu: doc.data().has_sub_menu,
                    item_pos: doc.data().item_pos,
                    sub_menu: [],
                    // otherData: doc.data()
                });
            });

            // GETTING SUB MENUES
            firestore.collection('header_menu_categories').orderBy('item_name', 'asc').get().then(querySnapshot => {
                querySnapshot.forEach(doc => {
                    subMenuData.push({
                        item_id: doc.id,
                        parent_id: doc.data().parent_id,
                        item_name: doc.data().item_name,
                        is_active: doc.data().is_active
                    });
                });

                // BUILDING MENU
                mainData.map(item => {
                    if (item.has_sub_menu === true) {
                        return subMenuData.map(sub_item => {
                            if (item.item_id === sub_item.parent_id) {
                                item.sub_menu.push(sub_item);
                            }
                            return item;
                        })
                    }
                });


                dispatch({ type: 'FETCH_MENU_ITEM', data: mainData });
            });
        });
    }
};

Печать данных с использованием

<ul>
    {
        props.mainMenu && props.mainMenu.map(item => {
            return (
                (item.is_active) &&
                <li key={item.item_id} className={item.has_sub_menu ? 'has-menu-items' : ''}>
                    <a href={item.item_link}>{item.item_name}</a>
                    {
                        (item.has_sub_menu) &&
                        <ul className="sub-menu">
                            {
                                item.sub_menu.map(sub_item => {
                                    return (
                                        <li key={sub_item.item_id}>
                                            <a href={sub_item.item_link}>{sub_item.item_name}</a>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    }
                </li>
            )
        })
    }
</ul>

Answer 1

Это правило eslint: https://eslint.org/docs/rules/array-callback-return

Оно заставляет вас возвращать что-либо из любой функции фильтрации, сопоставления и сворачивания массива,

mainData.map(item => {
  if (item.has_sub_menu === true) {
    return subMenuData.map(sub_item => {
      if (item.item_id === sub_item.parent_id) {
        item.sub_menu.push(sub_item);
      }
      return item;
    })
  }
  // nothing returned here
});

Примечание не по теме:уверен, что эта функция действительно будет работать?

Я подозреваю, что вы хотели сделать что-то вроде этого:

mainData.forEach(item => {
  if (item.has_sub_menu === true) {
    item.sub_menu = subMenuData.reduce((acc, sub_item) => {
      if (sub_item.parent_id === item.item_id) {
        acc.push(sub_item);
      }
      return acc;
    }, []);
  }
});

Answer 2

Это консоль браузера или системный терминал?Больше похоже на системный терминал и сообщение говорит само за себя: "Line 35: Expected to return a value at the end of arrow function array-callback-return" Скорее всего, вы не возвращаете значение.Если вы отобразите массив и в обратном вызове у вас будет if ->, что произойдет, если условие if не выполнено?Вы не будете вводить это - так что вы возвращаете, когда не входите в утверждение if - вы догадались - ничего.В зависимости от того, что вы делаете, вы можете вернуть false.Затем отфильтруйте все элементы и верните только один с положительным значением.