Question

我是新来的反应者，正在尝试创建一个电子商务网站。为此，我使用了URL端点来映射数据。

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

第二级子类别，我能够成功实现，但是对于第三级类别，我不能完美呈现

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

这是我到目前为止所实现的，屏幕快照。

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

我的相同代码：

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}> 
          <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>
            )
        });

数据响应无法在React JS应用中映射

1 个答案: