React组件中setState函数未被识别报错，请求排查解决

我帮你排查出代码里的几个关键问题，这就是导致setState被编辑器标红提示“unresolved function or method setState()”的原因：

1. mapDispatchToProps中错误使用this.setState #

在你定义的mapDispatchToProps里，toTriviaPage函数尝试调用this.setState，但这里的this并不是MenuPanel组件的实例——mapDispatchToProps是独立于组件的外部函数，它的作用是把Redux的action绑定到props上，根本访问不到组件的this，所以编辑器会报错，运行时也会抛出异常。

2. 组件方法的this指向隐患（次要但关键） #

虽然你用onClick={() => this.toImagePage()}的箭头函数包裹调用，暂时能保证toImagePage里的this指向组件实例，但这种写法每次render都会创建新的箭头函数，性能上有细微损耗，而且不是最稳妥的绑定方式。

完整修复方案 #

下面是修正后的代码，我调整了逻辑并修复了所有问题：

import React, { Component } from 'react';
import { push } from 'react-router-redux'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
const styles = require('./sidebar.css');

class MenuPanel extends Component {
  // 构造函数传入props，并绑定方法的this到组件实例
  constructor(props){
    super(props);
    this.state = {
      activePanel: "trivia"
    };
    this.toImagePage = this.toImagePage.bind(this);
    this.toTriviaPage = this.toTriviaPage.bind(this);
  }

  toImagePage(){
    this.setState({activePanel:"image"});
    console.log("hey");
  }

  // 把页面跳转和状态更新移到组件内部方法中
  toTriviaPage(){
    this.setState({activePanel:"trivia"});
    this.props.push('/trivia');
  }

  render() {
    return (
      <div>
        <div className="navbar-side">
          <div className="tessact-logo"></div>
          <div className="navbar-item active" onClick={this.toTriviaPage}>
            <a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a>
          </div>
          <div className="navbar-item" onClick={this.toImagePage}>
            <a className="navbar-item-link"><span className="fa fa-picture-o"></span> IMAGES</a>
            <div className="navbar-item-inside">
              <a className="navbar-item-inside-link">PERSONSS</a>
              <a className="navbar-item-inside-link">BRANDS</a>
              <a className="navbar-item-inside-link">OBJECTS</a>
            </div>
          </div>
          <div className="navbar-item">
            <a className="navbar-item-link"><span className="fa fa-tags"></span> KEYWORDS</a>
          </div>
        </div>
      </div>
    );
  }
}

// mapDispatchToProps只注入Redux的push方法
const mapDispatchToProps = dispatch => ({
  push: bindActionCreators(push, dispatch)
});

export default connect(
  null,
  mapDispatchToProps
)(MenuPanel)

额外说明 #

如果你希望activePanel状态能被全局共享，那应该把它放到Redux的store里，通过action和reducer来管理，而不是用组件本地的setState。这种情况下，你需要定义对应的action type、action creator和reducer，然后在组件里dispatch更新状态的action。

内容的提问来源于stack exchange，提问作者ArbitB