reactjs - 数据响应无法在反应 js 应用程序中映射

问题描述

我是新来的反应并试图创建一个电子商务网站。为此，我使用了 url 端点来映射数据。

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

嗯，二级子类，我可以成功实现，但是对于三级子类，我不能完美渲染

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

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

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

我的代码相同：

顶部导航.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;

子菜单.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;

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

标签： reactjs

您需要的是对组件的递归调用。例如，对于第三级，您可以再次调用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>
            )
        });

reactjs - 数据响应无法在反应 js 应用程序中映射

问题描述

解决方案

推荐阅读