Question

我正在学习React，并且有一些菜单和 sub_menu 项目，我在Firestore上创建了两个不同的集合，并正在从中获取数据。我想显示菜单，并根据其父ID显示其子菜单。

我在 map（）中使用了JavaScript map（），我的代码运行良好，但是我想知道这是正确的，因为我在控制台中收到以下警告： / p>

第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

这是浏览器控制台还是您的系统终端？看起来更像是系统终端，消息说明了一切："Line 35: Expected to return a value at the end of arrow function array-callback-return"您很可能没有返回任何值。如果您在数组上进行映射并在回调中有一个if->如果不满足if条件怎么办？您不会输入它-因此，如果不输入if语句，您将返回什么-您猜对了-什么都没有。根据您的操作，您可以返回false。然后过滤所有元素，只返回一个带有正值的元素。

Answer 2

这是一个附带条件：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;
    }, []);
  }
});

从Firebase Firestore提取数据时如何使用嵌套map（）函数

2 个答案: