react-native - 在反应式中使用父子关系查看菜单和子菜单

Question

我想以这种父子关系的方式显示菜单：

我已经使用递归函数来实现这个，我已经走了这么远，但它没有显示菜单

这是来自api的数据

我也尝试过使用 js 的 map 和 filter 功能显示菜单，但都没有成功。任何帮助将不胜感激。

    import React from 'react';
            import {
               Image,ScrollView,StyleSheet,Text, View 

            } from 'react-native';

            import Panel from '../../components/BottomTabFiles/Panel';
            import {fetchRestaurantMenu} from '../actions/restaurantMenuAction';
            import {connect} from "react-redux";

            class BookmarkReservations extends React.Component{

            componentDidMount() {

              this.props.fetchRestaurantMenu("getmenu"); //calling api from redux
            }

            MainMethod(){  //This is main method that will be called
                let data = this.props.restaurantMenuDetails.restaurantMenu, 
                  //getting data from redux
                   rawList = [],
                   tempList = [],
                   self = this,
                   MainMenuArray = [];

                   data.forEach(dataItem=>{
                    rawList.push(dataItem);
                    });

      //if an item is parent, then put it into tempList(MainMenu or ParentItem has 
      //m_pid of '00000000-0000-0000-0000-000000000000')

                    rawList.forEach(function(dataItem){
                        if(dataItem.m_pid == '00000000-0000-0000-0000-000000000000')  
                         {
                          tempList.push(dataItem);
                        }           
                      });

                        MainMenuArray.push( 
                          tempList.forEach(function(dataItem){
                            if(dataItem.m_pid == '00000000-0000-0000-0000-000000000000'){  //it's MAIN MENU
                             //Its MainView or ParentItem View
                              <Panel key={dataItem.m_pid} title={dataItem.m_name}>
                                    {self.BindCategory(dataItem.m_name, dataItem.mid, dataItem.m_pid, dataItem.m_iscategory)}

                                    {/* check for CHILDREN           */}
                                    {self.GetChildCategory(rawList, dataItem.mid)}

                              </Panel>
                            }
                          })
                        );
                        return MainMenuArray;
                    }

                BindCategory(menuName, menuId, menumPid, isMenu){
                  debugger
                  let bindCategoryArray = [];
                  if(isMenu == true ){
                    console.log("BindCategory called "+menuName);
//THIS is CHILDVIEW that will reside inside MAINMENU
                     bindCategoryArray.push(
                      <View key={Math.random()} style={[styles.menuContainer, styles.itemContainer ]}> 
                          <Image
                             style={{width:30, height:30, padding: 2, }}
                             resizeMode="contain"
                             source={require('../../components/images/coke.jpg')} />          
                           <View style={{flexDirection:'column',flex:1, paddingHorizontal:10 }}>

                             <Text key={menuId} style={styles.textContainer}>

                              {menuName}          
                             </Text>
                             <Text numberOfLines={1} ellipsizeMode='tail' style={styles.textStyle}>
                                (Android-only) Sets the elevation of a view, using Android                  
                             </Text>
                           </View>
                       </View>);
                  }

                  return bindCategoryArray;
              }


              GetChildCategory(rawList, categoryId){
                let tempChildList = [],
                  tempCHildArray = [];

                for(let i=0; i< rawList.length; i++){
                    if(rawList[i].m_pid == categoryId){
                        tempChildList == rawList;
                    }
                }

                console.log("GetChildCategory called "+tempChildList);
                console.log(tempChildList);
                 tempCHildArray.push( tempChildList.forEach(function(dataItem){
                    if(dataItem.m_pid ==categoryId ){
                      <Panel key={dataItem.m_pid} title={dataItem.m_name}>

                            {this.BindCategory(dataItem.m_name, dataItem.mid, dataItem.m_pid, dataItem.isMenu)}

                            {/* check for CHILDREN           */}
                            {this.GetChildCategory(rawList, dataItem.mid)}

                        </Panel>            
                    }
                }));

                return tempCHildArray;
            }

            test(){
              let panelArray = [];
                panelArray.push(<Panel key={Math.random()} title="Breakfast">

                    </Panel>);
                    return panelArray;
            }

            render(){

              return(        
                <ScrollView style={styles.container}>    

                      {this.test()} //This test method shows View
                   {this.MainMethod()}  //calling above method does'nt show up View   

            </ScrollView>
                );
            }
            }    

            const mapStateToProps =state=> {
              return{
                restaurantMenuDetails: state.fetchRestaurantMenuReducer,
              }
            }

            export default connect(mapStateToProps,{
                  fetchRestaurantMenu
                })(BookmarkReservations);

标签： react-nativereact-redux

Answer 1

经过数小时的头脑风暴，我终于找到了上述问题的解决方案。如果有人在他们的项目中遇到此类问题，他们可以寻找以下解决方案。希望它也可以帮助某人。

import React from 'react';
import {
   Image,ScrollView,StyleSheet,Text, View 

} from 'react-native';

import Panel from '../../components/BottomTabFiles/Panel';
import {fetchRestaurantMenu} from '../actions/restaurantMenuAction';
import {connect} from "react-redux";

class BookmarkReservations extends React.Component{

componentDidMount() {

  this.props.fetchRestaurantMenu("getmenu"); //calling api from redux
}

MainMenu(){
  let panelArray = [],
    self = this,
   data = this.props.restaurantMenuDetails.restaurantMenu; //getting data from api

        data.forEach(item=>{
          if(item.m_pid == '00000000-0000-0000-0000-000000000000'){ //checking for parentItem i.e. MainMenu
            console.log("test");
            panelArray.push(
              <Panel key={Math.random()} title={item.m_name}>
                {self.SubMenu(data, item.mid)}   //childView
              </Panel>
             )
          }});

        return panelArray;
}

SubMenu(data, menuId){  //data is mainList and menuId is parentId
  debugger
  let someArray = [];
  console.log("Data ");
  console.log(data+"  "+ menuId);
        data.forEach(item=>{
          if(item.m_pid == menuId && item.m_iscategory == true){ //If an item is subMenu then insert again MainMenuview 
             someArray.push( 
                <Panel key={Math.random()} title={item.m_name}>
                    {this.SubMenu(data, item.mid, item.m_iscategory)}
                </Panel>
              )
          }
          if(item.m_pid == menuId && item.m_iscategory == false){  //if its a child item of that parent item then insert it in child view

            console.log("childrenItems");
            someArray.push(  
              <View key={Math.random()} style={[styles.menuContainer, styles.itemContainer ]}>
                  <Image
                     style={{width:30, height:30, padding: 2, }}
                     resizeMode="contain"
                     source={require('../../components/images/coke.jpg')} />          
                   <View style={{flexDirection:'column',flex:1, paddingHorizontal:10 }}>

                     <Text key={Math.random()} style={styles.textContainer}>

                      {item.m_name}          
                     </Text>
                     <Text numberOfLines={1} ellipsizeMode='tail' style={styles.textStyle}>
                        {`Rs. ${item.m_isprice}`}    

                     </Text>
                   </View>
               </View>)
          }


        }); 

      return someArray;
}


  render(){          

  return(
    <ScrollView style={styles.container}>    

            {this.MainMenu()}  //calling above method

            <Panel key={Math.random()} title="BreakFast">  //this is for **Test Purpose**

               <Panel key={Math.random()} title="Tea and Bread">
                <View key={Math.random()} style={[styles.menuContainer, styles.itemContainer ]}>
                    <Image
                      style={{width:30, height:30, padding: 2, }}
                      resizeMode="contain"
                      source={require('../../components/images/coke.jpg')} />          
                    <View style={{flexDirection:'column',flex:1, paddingHorizontal:10 }}>

                      <Text key={Math.random()} style={styles.textContainer}>

                        Lemon Tea          
                      </Text>
                      <Text numberOfLines={1} ellipsizeMode='tail' style={styles.textStyle}>
                          Rs.80                  
                      </Text>
                    </View>
                </View>
               </Panel>
             </Panel>

</ScrollView>
    );
}
}


const mapStateToProps =state=> {
  return{
    restaurantMenuDetails: state.fetchRestaurantMenuReducer,
  }
}

export default connect(mapStateToProps,{
      fetchRestaurantMenu
    })(BookmarkReservations);