当前位置: 首页 > 面试题库 >

在函数中this.state是未定义的-React JS

闻人冷勋
2023-03-14
问题内容

为什么我在这里未定义状态?我尝试了各种解决方案,但没有一个对我有用。有人可以指出这里做错了什么吗

编辑:

组件的完整代码

  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

当从服务器动态加载侧边栏内容时,也有人可能会建议一个更好的选择


问题答案:

通过使用function这种方式,您会失去上下文,this而不是您所期望的那样。

在这种情况下,请将箭头功能用作:

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

或者, 这就是我的建议 ,请移至方法createMenuItems之外render

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

也可以将其绑定到构造函数中:

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


 类似资料:
  • 问题内容: 尝试轮询AngularJS资源上的自定义方法时,我在处收到以下错误:(该方法工作正常。) Angular.js 10016-10035: 简化的资源: 我收到错误的简化指令: 一旦运行该方法,执行该行就会引发上面的错误。 在Chrome检查器中,我看到对API的调用实际上已完成。但是兑现诺言似乎会引发一些错误… 我该如何解决这个错误? 编辑: Angular Resource正在尝试用

  • 我不知道为什么会这样,但当我有: 错误消失了。 更新这是我的完整html代码:

  • 问题内容: 我正在使用Reactjs,编写一个菜单组件。 每当我在map函数内部使用“ this”时,它都是未定义的,但在外部,则没有问题。 错误: “无法读取未定义的属性’props’” 有人帮我!:(( 问题答案: 需要第二个参数来设置在映射函数中引用的内容,因此将其作为第二个参数传递以保留当前上下文: 另外,您可以使用ES6 箭头功能自动保留当前上下文:

  • 问题内容: 我已经运行(并重新启动了MySQL / Apache 2),但是仍然出现此错误: 致命错误:在第21行的/home/validate.php中调用未定义的函数mysql_connect() 说/etc/php5/apache2/conf.d/pdo_mysql.ini文件已被解析。 问题答案: 好吧,这是你的机会!看来PDO已准备就绪;用它代替。 尝试检查是否正在加载PHP MySQL

  • 我已经运行了(并重新启动MySQL/Apache 2),但我仍然得到这个错误: 致命错误:在第21行的/home/validate.php中调用未定义的函数mysql_connect() 表示/etc/php5/apache2/conf.d/pdo_mysql.ini文件已被解析。

  • 在index.js,我有: 我从以下地方复制粘贴了代码:https://firebase.google.com/docs/functions/get-started 不知何故,当我使用 我得到: 错误:分析函数触发器时出错。ReferenceError:未在对象上定义函数。(/home/[USERNAME HERE]/functions/index.js:1:87)在模块中_在对象处编译(modu