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

Dans mon cas, l'erreur s'est produite parce que la nouvelle ligne après l'élément return déclaration.

Erreur : Je m'attendais à une affectation ou à un appel de fonction et j'ai vu une expression à la place.

return
(
    <ul>
        {
            props.numbers.map(number => <li key={number.toString()}>number</li>)
        }
    </ul>
);

Fonctionnement correct. Pas d'erreur

return (
    <ul>
        {
            props.numbers.map(number => <li key={number.toString()}>number</li>)
        }
    </ul>
);

Answer 2

J'ai rencontré la même erreur, avec le code ci-dessous.

    return this.state.employees.map((employee) => {
      <option value={employee.id}>
        {employee.name}
      </option>
    });

Le problème ci-dessus a été résolu lorsque j'ai remplacé les accolades par des parenthèses, comme indiqué dans l'extrait de code modifié ci-dessous.

      return this.state.employees.map((employee) => (
          <option value={employee.id}>
            {employee.name}
          </option>
        ));

Answer 3

Dans mon cas, cela est dû aux accolades de la fonction. Si vous utilisez jsx, vous devez remplacer les accolades par des parenthèses, voir le code ci-dessous.

const [countries] = useState(["USA", "UK", "BD"])

J'ai essayé mais ça ne marche pas, je ne sais pas pourquoi.

 {countries.map((country) => {
        <MenuItem value={country}>{country}</MenuItem>
  })}

Mais quand je remplace les accolades par des parenthèses, ça marche bien pour moi.

  {countries.map((country) => ( //Changes is here instead of {
        <MenuItem value={country}>{country}</MenuItem>
  ))} //and here instead of }

J'espère que cela vous aidera aussi...

Answer 4

Dans mon cas, j'ai utilisé des virgules au lieu de points-virgules dans le constructeur.

Exemple avec des erreurs :

class foo(bar1, bar2, bar3){
    this.bar1=bar1,
    this.bar2=bar2,
    this.bar3=bar3,

}

J'aurais dû utiliser des points-virgules comme ci-dessous :

class foo(bar1, bar2, bar3){
    this.bar1=bar1;
    this.bar2=bar2;
    this.bar3=bar3;
}

Answer 5

C'est une question délicate. Lorsque vous utilisez le mot-clé return, assurez-vous que le DÉBUT de la parenthèse se trouve SUR LA MÊME LIGNE que le mot-clé return mot-clé. Si vous faites cela, tout devrait fonctionner correctement. Si vous ne le faites pas, vous obtiendrez le bogue ci-dessus.

J'ai ajouté un diagramme pour (j'espère) rendre les choses super claires pour tout le monde, et pour éviter à certains d'entre vous d'avoir à se procurer un nouveau moniteur. J'espère que c'est clair comme de l'eau de roche, et si ce n'est pas le cas, postez un commentaire et j'essaierai de le modifier.