React Js中的渲染子菜单组件中的问题

Question

topNavigation.js

import React, { Component } from 'react';
import axios from 'axios';
import SubMenu from './subMenu';



class Navigation extends Component {

  state = {
    mainCategory: []
  }

  componentDidMount() {
    axios.get('http://localhost:3030/topCategory')
      .then(res => {
        console.log(res.data.express);
        this.setState({
          mainCategory: res.data.express.catalogGroupView
        })
      })
  }



  render() {

    const { mainCategory } = this.state;
    return mainCategory.map(navList => {
      return (

        <ul className="header">
          <li key={navList.uniqueID}> <button className="dropbtn ">{navList.name}</button>
          <SubMenu below={this.props.navList.catalogGroupView}/>

          </li>
        </ul>

      )

    })

  }


}

export default Navigation;

I'm new to react and trying to make an ecommerce website. I have designed the homepage. For the navigation, I have used an external api http://149.129.128.3:3737/search/resources/store/1/categoryview/@top?depthAndLimit=-1,-1,-1,-1

and mapped the response.

If I use the below code in place of SubMenu component it works

<ul>
                {console.log(navList.catalogGroupView)}
                {
                  navList.catalogGroupView.map(sub=> {
                    return <li key={sub.uniqueID}> <button>{sub.name}</button></li>
                    })
                }
              </ul>

But as per the url endpoint response there are more sub categories which I'm unable to map.

I thought of creating a separate component to display the sub menu items. But whenever I use this code it doesn't work.

Submenu.js component

import React, { Component } from 'react';


class SubMenu extends Component {


    constructor(props) {
        super(props);
        this.state = {
            subCategory: []
        };
    }

    render() {


        return subCategory.map(sub => {

            return (
                <ul>
                    <li key={sub.uniqueID}> <button>{sub.name}</button></li>
                </ul>

            )
        })

    }

}

export default SubMenu;

Can somebody please help me on this. I would be grateful. I'm not getting where I got wrong.

Answer 1

You're trying to access subCategory of state. Here is the working part:

import React, { Component } from 'react';


class SubMenu extends Component {


constructor(props) {
    super(props);
    this.state = {
        subCategory: []
    };
}

render() {
    const { subCategory } = this.state; // you should've add this part

    return subCategory.map(sub => {

        return (
            <ul>
                <li key={sub.uniqueID}> <button>{sub.name}</button></li>
            </ul>

        )
    })

}

}

export default SubMenu;

UPDATE Over here:

<SubMenu below={this.props.navList.catalogGroupView}/>

You're trying to access prop, which doesn't exist, so you should do it that way:

<SubMenu below={navList.catalogGroupView}/>

And then In Submenu, you should map over the props, not state, because your state always will be empty array(because you're not setting it). And you don't need to use state in that case, because you just need to iterate over array. So here is the code of Submenu:

import React, { Component } from 'react';


class SubMenu extends Component {
    render() {
        const {below} = this.props;
        return below.map(sub => {

            return (
                <ul>
                    <li key={sub.uniqueID}> <button>{sub.name}</button></li>
                </ul>

            )
        })

    }

}

export default SubMenu;

And theoretically working code of topNavigation.js:

import React, { Component } from 'react';
import axios from 'axios';
import SubMenu from './subMenu';



class Navigation extends Component {

  state = {
    mainCategory: []
  }

  componentDidMount() {
    axios.get('http://localhost:3030/topCategory')
      .then(res => {
        console.log(res.data.express);
        this.setState({
          mainCategory: res.data.express.catalogGroupView
        })
      })
  }



  render() {

    const { mainCategory } = this.state;
    return mainCategory.map(navList => {
      return (

        <ul className="header">
          <li key={navList.uniqueID}> <button className="dropbtn ">{navList.name}</button>
          <SubMenu below={navList.catalogGroupView}/> 

          </li>
        </ul>

      )

    })

  }


}

export default Navigation;

Hope this helps.