Question

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

30 | }）
   31 | * /
  32 | function mapStateToProps（state）{
      | ////////////////// ^
   33 |返回{
   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关键字。类只能包含原型方法和构造函数（从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
        }
    }

修改

如后面的答案中所述，您需要将您的地图从类中移动到州声明。

然后你可以

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

你决定使用箭头功能。

Answer 2

你在一个类中声明一个函数：

class Counter extends React.Component {

  // ...

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

}

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

class Counter extends React.Component {

  // ...

}

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

Answer 3

将以下代码移到类＆＃34; Counter＆＃34;：

的定义之外

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

这既解决了类中无效函数关键字的问题，又解决了很快就会遇到的第二个问题，即如果将mapStateToProps函数放入类中，则无法直接访问该函数＆＃34;计数器＆＃34;

这样写它应该有效：

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

Answer 4

您需要将mapStateToProps放在课程柜台之外。因为mapStateToProps是另一个不属于Counter的分离函数。

意外的令牌React-Redux

4 个答案:

修改