期望的赋值或函数调用:no-unused-expressions 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;

我是React的新手,对于这段代码,它给出了这个错误

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

不明白哪里出错,请帮忙

Answer 1

发生这种情况是因为您将括号return放在下一行.如果你编写没有分号的js并使用你在下一行打开括号的样式,这可能是一个常见的错误.

口译员认为您返回undefined并且不检查您的下一行.这是return运营商的事情.

将打开的支架放在同一条线上return.

Answer 2

对我来说，使用地图时发生了错误。而且我没有在地图中使用 return 语句。

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

上面的代码产生了错误。

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

简单地添加 return 解决了它。

Answer 3

在我的情况下，我在应该放在括号的地方放了花括号。

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

应该在哪里：

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

如MDN文档中所述，这样做的原因是，由包裹的箭头函数()将返回其包裹的值，因此，如果我想使用花括号，则必须添加return关键字，如下所示：

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

Answer 4

如果您在带有花括号的函数中使用 JSX，则需要将其修改为括号。

错误代码

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

正确的代码

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