Неожиданный токен React-Redux - PullRequest
Новая
       8

Неожиданный токен React-Redux

0 голосов
/ 28 мая 2018

Я действительно не знаю, почему я получаю эту синтаксическую ошибку:

30 |})
31 |* /
32 |функция 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/

Ответы [ 4 ]

0 голосов
/ 28 мая 2018

Переместите следующий код за пределы определения класса «Counter»: 

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

Это решает как проблему недействительного ключевого слова функции внутри класса, так и вторую проблему, с которой вы столкнетесь вскоре после, что функция mapStateToProps не доступна напрямую, если вы поместите ее в класс "Counter".

Напишите это так, и она должна работать: 

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);
0 голосов
/ 28 мая 2018

Вы объявляете функцию в классе: 

class Counter extends React.Component {

  // ...

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

}

, что является недопустимым синтаксисом JS.Переместите объявление функции за пределы класса: 

class Counter extends React.Component {

  // ...

}

function mapStateToProps(state) {
  // ...
}
0 голосов
/ 28 мая 2018

Вам нужно поставить mapStateToProps вне класса Counter.Так как mapStateToProps - это еще одна отдельная функция, не принадлежащая Counter.

0 голосов
/ 28 мая 2018

Ваша проблема здесь заключается в использовании ключевого слова функции.Классы могут содержать только прототипные методы и конструктор (по состоянию на 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
            }
        }

, если вы решите использовать функцию стрелки.

...