Javascript 使用react autoBind时ReactJs setState未定义

获取此未捕获的TypeError:尝试在函数中设置状态时，无法读取未定义的属性“setState”。我知道已经发布了其他类似的问题，但没有一个使用react autobind

import React from "react";
import ReactDOM from "react-dom";
import ScrollspyNav from "react-scrollspy-nav";
import autoBind from 'react-autobind';

export default class Navigation extends React.Component {
constructor(props) {
  super(props);
  autoBind(this);

  this.state = {
    toggleMobileNav: false
  };

}

    toggleNav() {
      this.setState((prev, props) => {
        return {
            toggleMobileNav: !prev.toggleMobileNav
        }
      });
    }


render() {
    return(

        <ScrollspyNav
            scrollTargetIds={["page-top", "about", "projects", "signup"]}
            activeNavClass="is-active"
            scrollDuration="1000"
            headerBackground="false"
            activeNavClass="active-nav"
        >

            <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
              <div className="container">
                <a id="page-top" className="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
                <button className="navbar-toggler navbar-toggler-right" onClick={this.toggleNav} type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                  Menu &nbsp;&nbsp;
                  <i className="fas fa-bars"></i>
                </button>
                <div className= {this.state.toggleMobileNav ? "show collapse navbar-collapse" : " " + 'collapse navbar-collapse'} id="navbarResponsive">
                  <ul className="navbar-nav ml-auto">
                    <li className="nav-item">
                      <a className="nav-link" href="#about">About</a>
                    </li>
                    <li className="nav-item">
                      <a className="nav-link" href="#projects">Projects</a>
                    </li>
                    <li className="nav-item">
                      <a className="nav-link" href="#signup">Contact</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
        </ScrollspyNav>
)

toggleNav = () => {
  this.setState((prev, props) => {
    return {
      toggleMobileNav: !prev.toggleMobileNav
    }
  });
}

当我像这样在构造函数中绑定函数时，这会起作用：

this.toggleNav = this.toggleNav.bind(this)

然而，我想用react autobind来完成这一点

import React from "react";
import ReactDOM from "react-dom";
import ScrollspyNav from "react-scrollspy-nav";
import autoBind from 'react-autobind';

export default class Navigation extends React.Component {
constructor(props) {
  super(props);
  autoBind(this);

  this.state = {
    toggleMobileNav: false
  };

}

    toggleNav() {
      this.setState((prev, props) => {
        return {
            toggleMobileNav: !prev.toggleMobileNav
        }
      });
    }


render() {
    return(

        <ScrollspyNav
            scrollTargetIds={["page-top", "about", "projects", "signup"]}
            activeNavClass="is-active"
            scrollDuration="1000"
            headerBackground="false"
            activeNavClass="active-nav"
        >

            <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
              <div className="container">
                <a id="page-top" className="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
                <button className="navbar-toggler navbar-toggler-right" onClick={this.toggleNav} type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                  Menu &nbsp;&nbsp;
                  <i className="fas fa-bars"></i>
                </button>
                <div className= {this.state.toggleMobileNav ? "show collapse navbar-collapse" : " " + 'collapse navbar-collapse'} id="navbarResponsive">
                  <ul className="navbar-nav ml-auto">
                    <li className="nav-item">
                      <a className="nav-link" href="#about">About</a>
                    </li>
                    <li className="nav-item">
                      <a className="nav-link" href="#projects">Projects</a>
                    </li>
                    <li className="nav-item">
                      <a className="nav-link" href="#signup">Contact</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
        </ScrollspyNav>
)

toggleNav = () => {
  this.setState((prev, props) => {
    return {
      toggleMobileNav: !prev.toggleMobileNav
    }
  });
}

从“React”导入React；
从“react dom”导入react dom；
从“react scrollspy nav”导入ScrollspyNav；
从“反应自动绑定”导入自动绑定；
导出默认类导航扩展React.Component{
建造师（道具）{
超级（道具）；
自动绑定（本）；
此.state={
toggleMobileNav:错误
};
}
toggleNav（）{
this.setState（（上一页，道具）=>{
返回{
toggleMobileNav:！prev.toggleMobileNav
}
});
}
render（）{
返回(
菜单








)

}

---

}

如果使用箭头函数语法声明方法，则无需调用

this.toggleNav=this.toggleNav.bind（this）

或使用react autobind

import React from "react";
import ReactDOM from "react-dom";
import ScrollspyNav from "react-scrollspy-nav";
import autoBind from 'react-autobind';

export default class Navigation extends React.Component {
constructor(props) {
  super(props);
  autoBind(this);

  this.state = {
    toggleMobileNav: false
  };

}

    toggleNav() {
      this.setState((prev, props) => {
        return {
            toggleMobileNav: !prev.toggleMobileNav
        }
      });
    }


render() {
    return(

        <ScrollspyNav
            scrollTargetIds={["page-top", "about", "projects", "signup"]}
            activeNavClass="is-active"
            scrollDuration="1000"
            headerBackground="false"
            activeNavClass="active-nav"
        >

            <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
              <div className="container">
                <a id="page-top" className="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
                <button className="navbar-toggler navbar-toggler-right" onClick={this.toggleNav} type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                  Menu &nbsp;&nbsp;
                  <i className="fas fa-bars"></i>
                </button>
                <div className= {this.state.toggleMobileNav ? "show collapse navbar-collapse" : " " + 'collapse navbar-collapse'} id="navbarResponsive">
                  <ul className="navbar-nav ml-auto">
                    <li className="nav-item">
                      <a className="nav-link" href="#about">About</a>
                    </li>
                    <li className="nav-item">
                      <a className="nav-link" href="#projects">Projects</a>
                    </li>
                    <li className="nav-item">
                      <a className="nav-link" href="#signup">Contact</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
        </ScrollspyNav>
)

toggleNav = () => {
  this.setState((prev, props) => {
    return {
      toggleMobileNav: !prev.toggleMobileNav
    }
  });
}

以下是一篇涵盖所有选项的中篇文章：