React-Redux语法错误求助：mapStateToProps定义行报错

先看你碰到的报错位置：

32 | function mapStateToProps(state) {
| ////////////////// ^

问题其实很简单——你把mapStateToProps函数塞到Counter类里面去了！JavaScript类的代码块里只能定义类方法（比如你写的increment、decrement这种），不能直接放独立的函数声明，引擎一看这写法就懵了，直接给你标红报错。

来看看你代码里的核心问题：
你写的class Counter的闭合大括号}，居然放在了mapStateToProps函数的后面，导致这个函数被错误包裹在类内部，这完全不符合语法规则啊！

给你修正后的完整代码：

import React from 'react';
import { connect } from 'react-redux';

class Counter extends React.Component {
  increment = () => { }
  decrement = () => { }

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.props.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    )
  }
} // 这里就把Counter类闭合了！

// mapStateToProps放在类外面，这才是正确的位置
function mapStateToProps(state) {
  return {
    count: state.count
  }
}

export default connect(mapStateToProps)(Counter);

简单说下关键修正点：

• 把Counter类的闭合大括号移到render方法结束后，确保类的所有方法都被正确包裹在类内部；
• 把mapStateToProps函数放在类的外部，它是Redux用来映射状态的独立函数，不属于组件类的一部分；
• 顺便给代码加了换行，可读性更好，以后排查问题也方便。

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