数据响应无法映射到反应js应用程序

Question

我是新手，想要创建一个电子商务网站。为此，我使用了url端点来映射数据。

http://149.129.128.3:3737/search/resources/store/1/categoryview/@top?depthAndLimit=-1,-1,-1,-1

那么，第二级子类别，我能够成功实现，但对于第三级别的类别，我无法完美渲染

我正在发送json响应的屏幕截图。

而这就是我到目前为止所实现的，屏幕截图。

正如您所看到的，从屏幕截图中，我可以实现顶部导航类别，甚至可以实现它。但是还有一个类别的子级别 - 例如：在女孩部分下，有更多的子类别我无法实现。

我的代码相同：

顶部Navigation.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}> 
          <a className="dropbtn ">

          {navList.name}

          <ul className="dropdown-content">
          <SubMenu below={navList.catalogGroupView}/> 
          </ul>

          </a>
          </li>
        </ul>

      )

    })

  }


}

export default Navigation;

subMenu.js

  import React, { Component } from 'react';
    import SubListMenu from './subListMenu';


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

                return (

                         <li key={sub.uniqueID}> 
                         <a>
                         {sub.name}
                         <ul>
                         <SubListMenu subBelow={this.props.below}/>
                         </ul>
                         </a>
                         </li>

                )
            })

        }

    }

    export default SubMenu;

subListMenu.js

import React, { Component } from 'react';

class SubListMenu extends Component {

        render() {
            const {subBelow} = this.props;
            console.log(subBelow)
            return subBelow.map(subl => {

                return (

                 <li key={subl.uniqueID}> <a>{subl.name}</a></li>



                )
            })

        }

    }

    export default SubListMenu;

任何人都可以帮我解决这个问题。我不知道我哪里弄错了。如果有人可以指导我，我将不胜感激。

Answer 1

您需要的是对组件的递归调用。因此，例如，对于第三级，您可以再次调用SubMenu这样的东西。这将再次调用Submenu组件并绑定您的第三级（不仅仅是第三级4,5等）。

注意：我没有测试过这段代码。

return subBelow.map(subl => {

            return (
                <React.Fragment>
                    <li key={subl.uniqueID}> <a>{subl.name}</a></li>
                    {subl.catalogGroupView !== undefined && <SubMenu below={subl.catalogGroupView} />}
                </React.Fragment>
            )
        });