Question

我正在学习React-Redux并且在尝试渲染侧导航时遇到了问题＆＃34;子部分＆＃34;来自嵌套对象的项目。

以下是组件：

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

class SideNav extends Component {  
  render() {
    return (
    <div className="sidenav-cont">
        <ul className="top-level-menu">
              {
  this.props.reducerSidenav.map((menuItem) => {
    return (
      <li key={menuItem.catId}>
        <a href="#">{menuItem.parentCat}</a>
        <ul className="bottom-level-menu">
          {  
            this.props.reducerSidenav.subCats.map((subMenuItem) => {
              <li key={subMenuItem.subCatId}><a href="#">{subMenuItem.subCatLabel}</a></li>
            })
          }
        </ul>
      </li>
      )
    })
  }
        </ul>
    </div>
    )
  }
}



function mapStateToProps(state) {
    return {
        reducerSidenav:state.reducerSidenav
    };
} 

export default connect(mapStateToProps)(SideNav);

如果我使用className＆＃34; bottom-level-menu＆＃34;删除第二个嵌套<ul>;然后该应用程序呈现我的父母部分＆＃34;列表项没问题。但是当我尝试重新创建相同的函数时，但是对于嵌套的对象，我会遇到错误。这是我的带有sidenav菜单对象的reducer：

export default function(){
    return [
            {
            catId:"parMenu1",
            parentCat:"Bass",
            subCats:[
                {
                    subCatId:"subMenu1",
                    subCatLabel:"base1"
                },
                {
                    subCatId:"subMenu2",
                    subCatLabel:"base2"
                },
                {
                    subCatId:"subMenu3",
                    subCatLabel:"base3"
                },
                {
                    subCatId:"subMenu4",
                    subCatLabel:"base4"
                }
            ]
        },
        {
            catId:"parMenu2",
            parentCat:"treb",
            subCats:[
                {
                    subCatId:"subMenu1",
                    subCatLabel:"treb1"
                },
                {
                    subCatId:"subMenu2",
                    subCatLabel:"treb2"
                },
                {
                    subCatId:"subMenu3",
                    subCatLabel:"treb3"
                },
                {
                    subCatId:"subMenu4",
                    subCatLabel:"treb4"
                }
            ]
        },
        {
            catId:"parMenu3",
            parentCat:"drums",
            subCats:[
                {
                    subCatId:"subMenu1",
                    subCatLabel:"drums1"
                },
                {
                    subCatId:"subMenu2",
                    subCatLabel:"drums2"
                },
                {
                    subCatId:"subMenu3",
                    subCatLabel:"drums3"
                },
                {
                    subCatId:"subMenu4",
                    subCatLabel:"drums4"
                }
            ]
        },
    ]
}

如您所见，用于子导航项的嵌套对象标题为subCats。我原以为我可以通过引用sidenav reducer状态来访问另一个对象中的对象，如下所示：this.props.reducerSidenav.subCats.map（（subMenuItem）=＆gt; {...就像我为父对象做的那样类别，但我得到＆＃34;无法读取属性＆＃39;未定义的地图＆＃34;错误在控制台。我哪里出错了？

Answer 1

您的代码中存在错误。

this.props.reducerSidenav.subCats.map((subMenuItem) => {
                                <li key={subMenuItem.subCatId}><a href="#">{subMenuItem.subCatLabel}</a></li>
                            })

reducerSidenav是一张桌子，可能你想要这样的东西

menuItem.subCats.map((subMenuItem) => {
                                <li key={subMenuItem.subCatId}><a href="#">{subMenuItem.subCatLabel}</a></li>
                            })

Answer 2

引用你的钥匙？

public class A {
      public void doSomething() {
            final String DOSOMETHING_METRICS = "doSomethingmetrics";
            ...
            System.out.println("Metrics for " + DOSOMETHING_METRICS + "is something");
      }
      public void saySomething() {
            final String SAYSOMETHING_METRICS = "saySomethingmetrics";
            ...
            System.out.println("Metrics for " + SAYSOMETHING_METRICS + "is something");
      }
}

}

Answer 3

我认为＆＃34;这个＆＃34;你的第一个map（）函数中的关键字没有引用你的想法。你需要绑定这个＆＃34;这个＆＃34;到map（）函数访问外部对象中的props：

this.props.reducerSidenav.map((menuItem) => {
    return (
        <li key={menuItem.catId}>
            <a href="#">{menuItem.parentCat}</a>
                <ul className="bottom-level-menu">
                    {  
                        this.props.reducerSidenav.subCats.map((subMenuItem) => {
                            <li key={subMenuItem.subCatId}><a href="#">{subMenuItem.subCatLabel}</a></li>
                        })
                    }
                </ul>
        </li>
        )
    }.bind(this))
 }

React-redux - 无法读取属性＆＃39; map＆＃39;未定义的

3 个答案: