affectation ou appel de fonction attendu : expressions inutilisées ReactJS

Question

class Game extends Component 
{
  constructor() 
  {
    super()
    this.state = {
      speed: 0
    }
    //firebaseInit()
  }
  render()
  {
    return 
    (
      <div>
        <h1>The Score is {this.state.speed};</h1>
      </div>
    )
  }
}

export default Game;

Je suis nouveau dans React et pour ce code il donne cette erreur

Expected an assignment or function call and instead saw an expression  no-unused-expressions

Je ne comprends pas où je me trompe, aidez-moi s'il vous plaît.

Answer 1

import React from 'react';

class Counter extends React.Component{
    state = {
        count: 0,
    };

    formatCount() {
        const {count} = this.state;
        // use a return statement here, it is a importent,
        return count === 0 ? 'Zero' : count;
    }
    render() {
        return(
          <React.Fragment>
              <span>{this.formatCount()}</span>
              <button type="button" className="btn btn-primary">Increment</button>
          </React.Fragment>
        );
    }
}

export default Counter;

Answer 2

Dans mon cas, j'ai obtenu cette erreur, car j'ai utilisé un appel à l'intérieur de la condition sans point-virgule :

  private async _setActive(active: boolean) {
    if (this.isActive === active) {
      return;
    }
    this.isActive = active;

    this.isActive ? this._start() : this._stop();
  }

Je l'ai changé, et l'erreur a disparu :

  private async _setActive(active: boolean) {
    if (this.isActive === active) {
      return;
    }
    this.isActive = active;

    if (this.isActive) {
      await this._start();
    } else {
      this._stop();
    }
  }

Answer 3

L'erreur - " Je m'attendais à une affectation ou à un appel de fonction et j'ai vu à la place une expression no-unused-expressions "Ce problème survient lorsque nous utilisons des accolades, c'est-à-dire {}, pour retourner une expression littérale d'objet. Dans ce cas, nous pouvons résoudre le problème de deux manières différentes

1. Utilisez les parenthèses, par exemple ().
2. Utilisez l'instruction de retour avec des accolades, par exemple {}.

Exemple :

const items = ["Test1", "Test2", "Test3", "Test4"];
console.log(articles.map(item => { `this is ${item}` })); // wrong
console.log(items.map(item => (`this is ${item}`))); // Option1
console.log(items.map(item => { return `this is ${item}` })); // Option2

Answer 4

Au cas où quelqu'un aurait un problème comme moi. J'utilisais les parenthèses avec l'instruction de retour sur la même ligne où j'avais écrit le reste du code. Aussi, j'ai utilisé la fonction map et les props donc j'ai eu beaucoup de parenthèses. Dans ce cas, si vous êtes nouveau dans React, vous pouvez éviter les parenthèses autour des props, car maintenant tout le monde préfère utiliser les fonctions flèches. Et dans la fonction map, vous pouvez également éviter les crochets autour de votre fonction callback.

props.sample.map(function callback => (
   ));

comme suit. Dans l'exemple de code ci-dessus, vous pouvez voir qu'il n'y a qu'une parenthèse ouvrante à gauche de la fonction callback.

Answer 5

Au lieu de

 return 
 (
  <div>
    <h1>The Score is {this.state.speed};</h1>
  </div>
 )

Utilisez le code ci-dessous

 return(
   <div>
     <h1>The Score is {this.state.speed};</h1>
   </div>
  )

En gros, utilisez l'accolade "(" dans la même ligne de retour comme "return(" . Cela réglera ce problème. Merci.