折腾：
【已解决】ReactJS中如何把AdminLTE中左边导航栏缩起来
期间，遇到诡异的事情了：
对于正常的ReactJS的代码：
import React, { Component } from ‘react’; import $ from ‘jquery’; import imgUser2 from ‘assets/img/user2-160×160.jpg’; export default class HeaderBar extends Component { constructor(props) { super(props); // Initial state this.state = { isUserDropdown: false, isNaviBarCollapse: false }; console.log(`HeaderBar constructor: this.state.isNaviBarCollapse=${this.state.isNaviBarCollapse},this.state.isUserDropdown=${this.state.isUserDropdown}`) this.toogleUserDropdown = this.toogleUserDropdown.bind(this); this.toggleSideNaviBar = this.toggleSideNaviBar.bind(this); } toggleSideNaviBar(){ console.log(`toggleSideNaviBar: before this.state.isNaviBarCollapse=${this.state.isNaviBarCollapse}`); let isCollapse = !this.state.isNaviBarCollapse; this.setState({isNaviBarCollapse : isCollapse}); console.log(`toggleSideNaviBar: -> this.state.isNaviBarCollapse=${this.state.isNaviBarCollapse}`); } pushMenu() { console.log(‘HeaderBar pushMenu’); this.toggleSideNaviBar(); } |
结果运行出错：
Uncaught TypeError: Cannot read property ‘toggleSideNaviBar’ of null at pushMenu (header-bar.js:88) at pushMenu (createPrototypeProxy.js:44) at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:70) at executeDispatch (EventPluginUtils.js:85) at Object.executeDispatchesInOrder (EventPluginUtils.js:108) at executeDispatchesAndRelease (EventPluginHub.js:43) at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54) at Array.forEach (<anonymous>) at forEachAccumulated (forEachAccumulated.js:24) at Object.processEventQueue (EventPluginHub.js:230) |
很诡异的是
对于Reactjs中的本地function，竟然无法调用？
react js Uncaught TypeError: Cannot read property of null
javascript – Uncaught TypeError: Cannot read property ‘state’ of null in react – Stack Overflow
javascript – React – Uncaught TypeError: Cannot read property ‘state’ of > null – Stack Overflow
javascript – Uncaught TypeError: Cannot read property ‘setState’ of undefined – Stack Overflow
结果最后找到原因了：
是此处的函数调用者：pushMenu没有绑定this，所以去打印this时是null
加上了：
this.pushMenu = this.pushMenu.bind(this); |
后，再去在pushMenu中调用（之前就已经绑定的）toggleSideNaviBar，就可以正常运行了。
【总结】
此处的出错：
Uncaught TypeError: Cannot read property ‘toggleSideNaviBar’ of null
原因是：
虽然此处的被调用的函数toggleSideNaviBar已经绑定了this：
this.toggleSideNaviBar = this.toggleSideNaviBar.bind(this); |
但是函数调用者pushMenu没有绑定this
导致调用时，this为空，所以调用：
this.toggleSideNaviBar();
报错。
解决办法：
也去绑定函数调用者pushMenu：
constructor(props) { super(props); 。。。 this.toggleSideNaviBar = this.toggleSideNaviBar.bind(this); this.pushMenu = this.pushMenu.bind(this); } |
即可。
转载请注明：在路上 » 【已解决】ReactJS中无法调用自己的本地函数Uncaught TypeError: Cannot read property of null