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

Cela se produit parce que vous mettez entre parenthèses des return sur la ligne suivante. Cela peut être une erreur courante si vous écrivez des js sans point-virgule et que vous utilisez un style où vous mettez des accolades ouvertes sur la ligne suivante.

L'interpréteur pense que vous retournez undefined et ne vérifie pas votre ligne suivante. C'est le return truc d'opérateur.

Mettez votre parenthèse ouverte sur la même ligne que le bouton return .

Answer 2

Dans mon cas, j'avais des accolades là où il aurait fallu des parenthèses.

const Button = () => {
    <button>Hello world</button>
}

Là où il aurait dû être :

const Button = () => (
    <button>Hello world</button>
)

La raison en est, comme expliqué dans les docs MDN est qu'une fonction flèche enveloppée par () retournera la valeur qu'il enveloppe, donc si je voulais utiliser des accolades, je devais ajouter l'élément return mot-clé, comme ça :

const Button = () => {
    return <button>Hello world</button>
}

Answer 3

Pour moi, l'erreur s'est produite lors de l'utilisation de map. Et je n'ai pas utilisé le return Statement à l'intérieur de la carte.

{cart.map((cart_products,index) => {
    <span>{cart_products.id}</span>; 
})};

Le code ci-dessus a produit une erreur.

{cart.map((cart_products,index) => {
    return (<span>{cart_products.id}</span>); 
})};

Le simple fait d'ajouter le retour a résolu le problème.

Answer 4

Si vous utilisez JSX dans une fonction avec des accolades, vous devez les remplacer par des parenthèses.

Code erroné

return this.props.todos.map((todo) => {
            <h3> {todo.author} </h3>;
        });

Code correct

//Change Curly Brace To Paranthesis   change {} to => ()
return this.props.todos.map((todo) => (
            <h3> {todo.author} </h3>;
        ));

Answer 5

Dans mon cas, je n'ai jamais mis retourner à l'intérieur d'une fonction flèche Mon code est donc le suivant

`<ProductConsumer>
   {(myvariable)=>{
      return  <h1>{myvariable}</h1>
   }}
</ProductConsumer> `