Javascript 如何为导航组件在地图功能上运行不同的阵列

非常新的编码所以很抱歉如果我的问题看起来很可笑

我正在我的网站上建立一个分为几个类别的菜单

在本例中，我们有理论和视频类别（视频只有一个级别，理论在两个级别上更深入）

下面的代码一次只适用于1个类别（这就是注释的原因）

我想问您如何构建一个更通用的函数，可以运行任何数组（对于map函数），并避免这种情况：“无法读取未定义的属性‘map’”

render（）{
常量理论=this.props.menauthory；
const videos=this.props.menuVideos；
//const menuTheory=theory.map（（理论，i）=>(
//
//this.onSelect（theory.category）}>
//
//     
//{理论.范畴}
//       
//     
//

//{theory.chapters&&theory.chapters.map（（chapter，i）=>this.onSelect1（chapter.objectId）}/>）}
//
//   
// ))
const menuVideo=videos.map（（视频，i）=>(
this.onSelect（video.category）}>
{video.category}
))
返回(
{/*{menuTheory}*/}
{menuVideo}
)

}

---

谢谢。

好的，听起来您正在寻找一种在React中进行条件渲染的方法。您需要做的是向组件添加一些状态。我添加了

showVideos

作为bool（

true | false

）。在渲染方法中使用

showVideos

，以确定要显示的菜单。您仍然可以使用map创建菜单，但在return块中，选中

this.state.showVideos

以确定要返回的内容。要使其完全工作，您还需要添加一个按钮，该按钮将调用

toggleMenu

onClick，以更新您的状态并切换正在显示的菜单

toggleMenu(){
    this.setState({
        showVideos: !this.state.showVideos
    });
}
render() {
    const theories = this.props.menuTheory; 
    const videos = this.props.menuVideos;

    const menuTheory = theories.map((theory, i) => (
        <div className="nav__category" key={i} onClick={() => this.onSelect(theory.category)}>
            <div className={this.state.isSelected === theory.category ? "nav__category__dropdown nav__category__dropdown--isSelected" : "nav__category__dropdown"}>
                <span className="nav__category__text">{theory.category}</span>
                <span className="checked"><img src={'../static/icons/nav__check.svg'}/></span>
            </div>
            <ul className={this.state.isExpanded === theory.category ? "nav__chapterBox" : "nav__chapterBox nav__chapterBox--isNotExpanded"}>
                {theory.chapters && theory.chapters.map((chapter, i) => <NavChapter key={i} id={chapter.objectId} title={chapter.name} onClick={() => this.onSelect1(chapter.objectId)}/>)}
            </ul>
        </div>
    ))

    const menuVideo = videos.map((video, i) => (

        <div className="nav__category" key={i} onClick={() => this.onSelect(video.category)}>
            <div className={this.state.isSelected === video.category ? "nav__category__dropdown nav__category__dropdown--isSelected" : "nav__category__dropdown"}>
              <span className="nav__category__text">{video.category}</span>
              <span className="checked"><img src={'../static/icons/nav__check.svg'}/></span>
            </div>
      </div>
    ))

    return (
      <nav className="nav__categoryBox">
        <button onClick={this.toggleMenu}>Toggle Menu</button>
        {this.state.showVideos ? menuVideo : menuTheory}
      </nav>
    )
}

toggleMenu（）{
这是我的国家({
showVideos:！this.state.showVideos
});
}
render（）{
常量理论=this.props.menauthory；
const videos=this.props.menuVideos；
const menuTheory=theory.map（（理论，i）=>(
this.onSelect（theory.category）}>
{理论.范畴}

{theory.chapters&&theory.chapters.map（（chapter，i）=>this.onSelect1（chapter.objectId）}/>）}

))
const menuVideo=videos.map（（视频，i）=>(
this.onSelect（video.category）}>
{video.category}
))
返回(
切换菜单
{this.state.showVideos？menuVideo:menuTheory}
)
}

错误发生在哪一行？如果

理论

和

视频

都是存在的数组，那么您发布的代码应该可以正常工作。我正在试图找出问题出在哪里确保

this.props.menuTheory

是一个数组，而不是

未定义的
。感谢Chase@ChaseDeAnda尝试理解我：）这段代码工作正常。我的目标是找到一种方法，在需要时返回nav中的menuVideo或menuTheory。现在代码显示菜单视频。如何正确书写以显示理论或视频菜单。
toggleMenu(){
    this.setState({
        showVideos: !this.state.showVideos
    });
}
render() {
    const theories = this.props.menuTheory; 
    const videos = this.props.menuVideos;

    const menuTheory = theories.map((theory, i) => (
        <div className="nav__category" key={i} onClick={() => this.onSelect(theory.category)}>
            <div className={this.state.isSelected === theory.category ? "nav__category__dropdown nav__category__dropdown--isSelected" : "nav__category__dropdown"}>
                <span className="nav__category__text">{theory.category}</span>
                <span className="checked"><img src={'../static/icons/nav__check.svg'}/></span>
            </div>
            <ul className={this.state.isExpanded === theory.category ? "nav__chapterBox" : "nav__chapterBox nav__chapterBox--isNotExpanded"}>
                {theory.chapters && theory.chapters.map((chapter, i) => <NavChapter key={i} id={chapter.objectId} title={chapter.name} onClick={() => this.onSelect1(chapter.objectId)}/>)}
            </ul>
        </div>
    ))

    const menuVideo = videos.map((video, i) => (

        <div className="nav__category" key={i} onClick={() => this.onSelect(video.category)}>
            <div className={this.state.isSelected === video.category ? "nav__category__dropdown nav__category__dropdown--isSelected" : "nav__category__dropdown"}>
              <span className="nav__category__text">{video.category}</span>
              <span className="checked"><img src={'../static/icons/nav__check.svg'}/></span>
            </div>
      </div>
    ))

    return (
      <nav className="nav__categoryBox">
        <button onClick={this.toggleMenu}>Toggle Menu</button>
        {this.state.showVideos ? menuVideo : menuTheory}
      </nav>
    )
}