Css ReactJs中的导航ul标记绑定错误

我是新手。我正试图建立一个电子商务网站，并创建了导航。但我面临一个特殊的问题

正如你从截图中看到的，我的ul标签在重复，这不应该是这种情况

我正在分享下面的代码作为我已经实现的代码

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} </a>
            <ul className="dropdown-content">
              <SubMenu below={navList.catalogGroupView} />
            </ul>


          </li>
        </ul>

      )

    })

  }


}

export default Navigation;

---

每当我在控制台窗口中看到我的代码时，ul标签就会重复。我不知道我哪里弄错了。有人能在这方面指导我吗。或者深入了解如何处理该问题。

您正在返回地图中的

元素

 return mainCategory.map(navList => {
      return (

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


          </li>
        </ul>

      )

    })

  }

returnmaincegory.map（导航列表=>{
返回(


{navList.name}




)
})
}

将地图包装在

中，如下所示：

<ul className="header">
    {mainCategory.map(navList => 
        (
            <li key={navList.uniqueID}>
                <a className="dropbtn ">{navList.name} </a>
                <ul className="dropdown-content">
                    <SubMenu below={navList.catalogGroupView} />
                </ul>
            </li>
        )
    })}
    }
</ul>

{maincegory.map（导航列表=>
(

{navList.name}



)
})}
}

您正在返回地图中的

元素

 return mainCategory.map(navList => {
      return (

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


          </li>
        </ul>

      )

    })

  }

returnmaincegory.map（导航列表=>{
返回(


{navList.name}




)
})
}

将地图包装在

中，如下所示：

<ul className="header">
    {mainCategory.map(navList => 
        (
            <li key={navList.uniqueID}>
                <a className="dropbtn ">{navList.name} </a>
                <ul className="dropdown-content">
                    <SubMenu below={navList.catalogGroupView} />
                </ul>
            </li>
        )
    })}
    }
</ul>

{maincegory.map（导航列表=>
(

{navList.name}



)
})}
}

您的ul位于

main类别内。映射

，因此将为每个映射项目生成一个新的ul

---

return
{maincegory.map（Function）}

将生成一个ul

您的ul位于

maincegory.map中，因此将为每个映射项生成一个新的ul

return
{maincegory.map（funtion）}
将生成一个ul
，因为您的
ul
位于
映射中。渲染方法应如下所示：

render() {
  const { mainCategory } = this.state;
  return (
    <ul className="header">
      {
        mainCategory.map(navList => (
          <li key={navList.uniqueID}>
            <a className="dropbtn ">{navList.name} </a>
            <ul className="dropdown-content">
            <SubMenu below={navList.catalogGroupView} />
            </ul>
          </li>
        ))
      }
    </ul>
  )
}

render（）{
const{maincegory}=this.state；
返回(

{
mainCategory.map（导航列表=>(

{navList.name}



))
}

)
}
因为您的
ul
在
地图中。渲染方法应如下所示：

render() {
  const { mainCategory } = this.state;
  return (
    <ul className="header">
      {
        mainCategory.map(navList => (
          <li key={navList.uniqueID}>
            <a className="dropbtn ">{navList.name} </a>
            <ul className="dropdown-content">
            <SubMenu below={navList.catalogGroupView} />
            </ul>
          </li>
        ))
      }
    </ul>
  )
}

render（）{
const{maincegory}=this.state；
返回(

{
mainCategory.map（导航列表=>(

{navList.name}



))
}

)
}
由于在.map方法中包含了父列表标记
，因此每次迭代都会创建新的
构造。您所需要做的就是将.map方法包装在.map方法中，因为在.map方法中包含了父列表标记，所以每次迭代都会创建新的
构造。您只需将.map方法包装在
中，不需要使用箭头函数返回，因为它是隐式的。不需要使用箭头函数返回，因为它是隐式的。我的css不工作……在进行更改后，它现在不显示内联块。请help@SajjadTabreez你能在codesandbox上分享你的代码吗？当然可以。我会发送你现在能帮我吗？我的css不工作…在做了更改后，它现在不显示内联块。请help@SajjadTabreez你能在codesandbox上分享你的代码吗？当然可以。我会的，你现在能帮我吗