this.state ist undefined innerhalb der Funktion - Reagieren JS

Question

Warum bekomme ich den Zustand ist hier nicht definiert? Ich habe verschiedene Lösungen ausprobiert, aber keine funktionierte für mich. Kann jemand darauf hinweisen, was hier falsch

bearbeiten tut:

Komplett-Code der Komponente

class Sidebar extends React.Component { 
    constructor (props) { 
     super(props) 
     this.state = { 
     menuSelected: menuOptions.menuItems[0].title, 
     } 
     this.createMenuListItem = this.createMenuListItem.bind(this) 
    } 
    render() { 
     console.log(this.state.menuSelected) 
     function getChildItems (child) { 
     let childItems = child.children.map(function (menuItem, index) { 
      return createMenuListItem(menuItem) 
     }) 
     return (
      <li key={child.title} className='dropdown'> 
      <i className={child.iconName} /> 
      <span className='dropdown-toggle'>{child.title}</span> 
      <ul className=''> 
       {childItems} 
      </ul> 
      </li> 
     ) 
     } 
     function createMenuListItem (menuItem) { 
     if (menuItem.hasChild === 'N') { 
      console.log(this.state.menuSelected) 
      return (
      <li key={menuItem.title}> 
       <a href='#'> 
       <i className={menuItem.iconName} /> 
       <span>{menuItem.title}</span> 
       </a> 
      </li> 
     ) 
     } else { 
      return getChildItems(menuItem) 
     } 
     } 

     let menuItemsLoaded = menuOptions.menuItems.map((menuItem, index) => { 
     return createMenuListItem(menuItem) 
     }) 
     return (
     <nav id='sidebar'> 
      <ul className='list-unstyled'> 
      {menuItemsLoaded} 
      </ul> 
     </nav> 
    ) 
    } 
    } 

    export default Sidebar 

auch jemand möglicherweise eine bessere Option vorschlagen, wenn der Sidebar Inhalt dynamisch vom Server geladen wird

Answer 1

Mit function verlieren Sie den Kontext und this ist nicht die, die Sie erwartet haben.

In diesem Fall entweder mit dem Pfeil Funktion als:

render() { 
    createMenuItems = (items) => { 
    console.log(this.state.menuSelected) 
    ... 
    } 
} 

Oder und hier kommt mein Vorschlag, createMenuItems außerhalb render Methode bewegen:

createMenuItems = (items) => { 
    console.log(this.state.menuSelected) 
} 

render() { 
    return (
    <nav id='sidebar'> 
     <ul className='list-unstyled'> 
     {menumenuOptions.menuItems.map((menuItem, index) => 
      this.createMenuListItem(menuItem) 
     )} 
     </ul> 
    </nav> 
) 
} 

es im Konstruktor Binding ist auch eine Möglichkeit:

class YourComponent extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     menuSelected: '', 
    } 

    this.createMenuListItem = this.createMenuListItem.bind(this) 
    } 

    createMenuListItem() { 
    console.log(this.state.menuSelected) 
    } 

    render() { 
    return (
     <nav id='sidebar'> 
     <ul className='list-unstyled'> 
      {menumenuOptions.menuItems.map((menuItem, index) => 
      this.createMenuListItem(menuItem) 
     )} 
     </ul> 
     </nav> 
    ) 
    } 
}