预期的赋值或函数调用：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

在我的例子中，我有大括号，它应该是括号。

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

它应该在哪里：

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

原因，正如in the MDN Docs 所解释的那样，() 包装的箭头函数将返回它包装的值，所以如果我想使用花括号，我必须添加 return 关键字，就像这样：

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

Answer 3

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

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

以上代码产生错误。

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

只需添加 return 即可解决。

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>;
        ));

Answer 5

在我的情况下，我从来没有把 return 放在箭头函数中 所以我的代码如下

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

Answer 6

在我的情况下，错误发生是因为 return 语句之后的新行。

错误：期望一个赋值或函数调用，但看到一个表达式

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

工作正常。没有错误

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

Answer 7

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 8

在我的情况下，我遇到了这个错误，因为在条件内部使用了一个没有分号的调用：

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

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

我改了，错误消失了：

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

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

Answer 9

当我们使用花括号即 {} 返回一个对象字面量表达式。在这种情况下，我们可以使用 2 个选项来修复它

1. 使用括号，即 ()
2. 使用带有花括号的 return 语句，即 {}

例子：

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 10

以防有人遇到像我这样的问题。我在编写其余代码的同一行上使用了括号和 return 语句。另外，我使用了地图功能和道具，所以我得到了很多括号。在这种情况下，如果您是 React 新手，您可以避免在 props 周围使用括号，因为现在每个人都更喜欢使用箭头函数。在 map 函数中，您还可以避免函数回调周围的括号。

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

像这样。在上面的代码示例中，您可以看到函数回调的左侧只有左括号。

Answer 11

在我的例子中，我在构造函数中使用了逗号而不是分号。

错误示例：

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

}

我应该使用下面的分号：

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

Answer 12

我遇到了同样的错误，代码如下。

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

当我将大括号更改为括号时，上述问题得到了解决，如下面修改后的代码 sn-p 所示。

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

Answer 13

在我的情况下，如果您使用 JSX，则由于函数大括号而发生，那么您需要将大括号更改为括号：

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

我试过了，但是不行，不知道为什么

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

但是当我将花括号更改为括号时，它对我来说工作正常

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

希望对你也有帮助...

Answer 14

代替

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

使用下面的代码

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

基本上在 "return(" 之类的同一行返回中使用大括号 "("。它将解决此问题。谢谢。

Answer 15

在我的情况下，我在 setState 行上遇到了错误：

increment(){
  this.setState(state => {
    count: state.count + 1
  });
}

我改成这个了，现在可以了

increment(){
  this.setState(state => {
    const count = state.count + 1

    return {
      count
    };
  });
}

Answer 16

这是一个棘手的问题。当您使用 return 关键字时，只需确保括号的 START 与 return 关键字位于同一行。如果你这样做，一切都应该正常。如果你不这样做，你会得到上面的错误。

我添加了一个图表，以（希望）让每个人都非常清楚，并让你们中的一些人不必为自己买一台新显示器。希望这很清楚，如果没有发表评论，我会尝试编辑它。

Answer 17

只想添加我的解决方案，以防其他人遇到此错误。就我而言，它与括号、箭头函数或缺少的返回语句没有任何关系。我有一张这样的支票

if (this.myProperty) {
    this.myProperty == null
}

我不得不删除它，然后错误就消失了。很难弄清楚这一点，因为错误消息根本没有描述性。