Javascript 意外令牌反应重复

我真的不知道为什么会出现这个语法错误：

30 |}）
31 |*/
32 |函数MapStateTrops（状态）{
|//^
33 |返回{
34 |计数：状态。计数
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);

从“React”导入React；
从'react redux'导入{connect}；
类计数器扩展了React.Component{
增量=（）=>{
}
减量=（）=>{
}
render（）{
返回(
柜台
-
{this.props.count}
+
)
}
/*这次尝试在同一个地方向我显示了相同的错误
常量mapStateToProps=状态=>({
计数：state.count
})
*/
函数mapstatetops（state）{//这是行。就在“m”中
返回{
计数：state.count
}
}
}
导出默认连接（MapStateTops）（计数器）；

---

我正在尝试此指南：

您的问题是使用function关键字。类只能包含原型方法和构造函数（从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-to-state声明

那你就可以

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

---

如果您决定使用arrow函数。

您正在类中声明函数：

class Counter extends React.Component {

  // ...

  function mapStateToProps(state) {
    // ...
  }

}

这是无效的JS语法。请将函数声明移到类之外：

class Counter extends React.Component {

  // ...

}

function mapStateToProps(state) {
  // ...
}

---

您需要将

mapStateToProps

放在类计数器外部。因为MapStateTops是另一个不属于计数器的独立函数。

将以下代码移到类“计数器”定义外部：

这既解决了类中的function关键字无效的问题，也解决了第二个问题，即如果将mapStateToProps函数放在类“Counter”中，则无法直接访问mapStateToProps函数

这样写应该会有用：

class Counter extends React.Component {
    ...
}

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

export default connect(mapStateToProps)(Counter);

---

谢谢！现在我有另一个问题…我读到我应该使用，例如，

this.increment=this.increment.bind（this）

。为什么？为什么我不能在我的计数器类中使用它？请看：还有，谢谢！现在我有另一个问题…我读到我应该使用，例如，

this.increment=this.increment.bind（this）

。为什么？为什么我不能在我的计数器类中使用它？你绑定

this

，这样方法总是用这个特定的

this

调用，也就是说，当你在另一个函数中调用这个方法时，比如说在另一个函数中，它不使用这个函数。相反，它使用你绑定的

this

。这将导致e您总是使用组件的

this

，因此您可以访问state（

this.state

）或该组件中的任何其他内容。如果您使用箭头函数，则无需像为您所做的那样进行绑定。react基本上提供了一种更干净的方法来实现这一点

class Counter extends React.Component {
    ...
}

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

export default connect(mapStateToProps)(Counter);