javascript - 意外的 token React-Redux

Question

我真的不知道为什么会出现此语法错误:

30 | })
31 | */
32 | function mapStateToProps(state) {
| ////////////////// ^
33 | return {
34 | count: state.count
35 | }

**这是我的代码:**

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

  /* This try is showing me the same error in the same place
  const mapStateToProps = state => ({
    count: state.count
  })
  */
  function mapStateToProps(state) { //This is the line. Right in the "m"
    return {
      count: state.count
    }
  }

}

export default connect(mapStateToProps)(Counter);

我正在尝试本指南: https://daveceddia.com/how-does-redux-work/

Answer 1

您的问题是使用 function 关键字。类只能包含原型(prototype)方法和构造函数(从 ECMAScript 2015 开始)。通常，如果您在类中声明一个方法，您将拥有:

  mapStateToProps(state) { //This is the line. Right in the "m"
    return {
        count: state.count
    }
}

或使用箭头函数

 mapStateToProps = (state)=> { //This is the line. Right in the "m"
        return {
            count: state.count
        }
    }

编辑

正如后面的答案中提到的，您需要将 map 从类内移动到状态声明。

然后你就可以拥有

const mapStateToProps = (state)=> { //This is the line. Right in the "m"
            return {
                count: state.count
            }
        }

您是否应该决定使用箭头函数。