1

Olá, instalei o ESLint para capturar os erros e verificar o código, porém o mesmo está pegando esse erro na linha 28 "updateDay = () => {" onde o problema está nessa sintax com o = antes do (), mas eu não sei qual seria a sintax correta nesse caso, pois ainda sou iniciante em Js.

Esse é o código de erro:

28:15 error Parsing error: Unexpected token =

updateDay = () => {
    const date = new Date();
    this.setState({
        currentDate: date.getDate(),
        weekday: getWeekdayAsString(date),
    });
};

Aqui está o código completo

import React from 'react';

import { getWeekdayAsString } from '../utils/dateTimeUtils';

class WeatherDisplay extends React.Component {   
    constructor() {
    super();

    this.state = {
      temperature: 22,
      degrees: 'c',
      forecast: 'parcialmente-nublado',
      weekday: 'Hoje',
      currentDate: null,
    };   }

  componentDidMount() {
    this.timerID = setInterval(() => this.updateDay(), 1000);   }

  componentWillUnmount() {
    clearInterval(this.timerID);   }

  updateDay = () => {
    const date = new Date();
    this.setState({
        currentDate: date.getDate(),
        weekday: getWeekdayAsString(date),
    });
};

  render() {
    const {
      temperature,
      degrees,
      forecast,
      weekday,
      currentDate,
    } = this.state;

    const icone = `/imgs/${forecast}.svg`;

    return (
      <div className="weather-display">
        <div className="weather-now">
          <img className="icon" src={icone} alt={forecast} />
          <span className="temperature">{temperature}
            <span className="degree">º{degrees}</span>
          </span>
        </div>
        <span className="weekday">{weekday} {currentDate}</span>
      </div>
    );   } }

export default WeatherDisplay;
4
  • stackoverflow.com/a/42701804/1377664
    – Sam
    Commented 13/04/2018 às 5:37
  • 1
    Em que contexto está esse código? o que vem antes de updateDay? O que é updateDay? uma var, let, const?
    – Sergio
    Commented 13/04/2018 às 9:04
  • 1
    Isso não estará dentro de uma classe ?
    – Isac
    Commented 13/04/2018 às 9:31
  • fiz uma atualização no post com o código completo. Commented 16/04/2018 às 17:59

3 Respostas 3

1

Provavelmente o código da pergunta esta localizado dentro de uma classe como uma "static property", como abaixo:

class Something {
  updateDay = () => {
    const date = new Date();
    this.setState({
      currentDate: date.getDate(),
      weekday: getWeekdayAsString(date),
    });
  };
  render() { // seu codigo de renderização }
}

Se esse for o caso, essa sintaxe usa o conceito de "static class properties" que é parte do padrão es7 (e nao do es6), e portanto ainda não suportado pelo eslint sem a ajuda de um plugin.

Em outras palavras, voce precisara editar suas configurações do eslint para que o mesmo trabalhe com o parser "babel-eslint" para que o eslint faça as verificações após o codigo ter sido transpilado pelo babel (o que ira converter a sintaxe da "static property" em uma função cuja sintaxe o eslint sera capaz de interpretar corretamente).

Experimente instalar o babel-eslint com:

npm install babel-eslint --save-dev

E, após isso, editar o arquivo .eslintrc adicionando a seguinte linha:

{
  "parser": "babel-eslint",
  ...
}

Fonte: https://github.com/airbnb/javascript/issues/589

0

Parece-me que estás a tentar usar uma "Arrow Function expression", estas devem ser feitas agarradas a um scope, pex:

const functionName = () => console.log('hello from functionName');

Estas funções são funçoes anonimas que são declaradas com a ajuda de uma variavel (no caso do exemplo, a constate "functionName")

Se quiseres usar uma "Arrow Function statement" podes usar assim:

functionName() { console.log('hello from functionName'; }

estas funções são funçoes com nomes que são, normalmente, declaradas em Objectos e Classes, pex:

Class ClassName {
    functionNAme() { console.log('hello from functionName'; }
}

que depois seria usado com:

const className = new ClassName();
className.functionName()

O que o ESLint te está a dizer, neste caso, é que a syntax não está à espera de um = nessa posição, uma vez que não tens um scope atrás do nome da função, ele está à espera que essa função seja do tipo "arrow function statement" ao invés de "arrow function expression".

0

Tenha certeza de que o local onde declarou a function esteja dentro da classe do componente em questão e fora de outra function. Exemplo de erro comum:

render() {

    updateDay = () => {
        const date = new Date();
        this.setState({
            currentDate: date.getDate(),
            weekday: getWeekdayAsString(date),
        });
    };

    return(<div></div>)

}
1
  • está dentro da classe, porém fora de outras funções. Fiz uma alteração onde eu coloco todo o código. Commented 16/04/2018 às 18:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .