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语句。

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

以上代码产生错误。

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

只需添加return即可解决。

Answer 2

发生这种情况是因为您将return的括号放在了下一行。如果您在编写不带分号的js并使用在下一行放置大括号的样式，这可能是一个常见错误。

解释器认为您返回undefined，因此不检查您的下一行。这就是return运算符。

将打开的括号与return放在同一行。

Answer 3

如果您在带有花括号的函数中使用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 4

在我的情况下，我在括号内加了花括号。

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

应该在的位置：

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

这样做的原因，如in the MDN Docs所述，是由()包装的箭头函数将返回它包装的值，因此，如果我想使用花括号，则必须添加{{1 }}关键字，如下所示：

return

Answer 5

对于我来说，发生错误是因为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 6

使用以下代码遇到相同的错误。

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

当我将花括号更改为括号时，上述问题已解决，如下面的修改后的代码片段所示。

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

Answer 7

在我的情况下，如果使用jsx，则由于函数花括号而发生，那么您需要将花括号更改为括号，请参见下面的代码

const [国家/地区] = 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 8

就我而言，我从未将返回放在箭头功能内所以我的代码是

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

Answer 9

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 10

代替

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

使用以下代码

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

基本上在与“ return（” 相同的返回行中使用大括号“（” 。它将解决此问题。谢谢。

Answer 11

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

  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 12

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

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

我将其更改为此，现在可以使用

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

    return {
      count
    };
  });
}

Answer 13

当我们使用花括号（即{}）返回一个错误时，会出现错误-“ 期望分配或函数调用，而看到一个表达式no-unused-expressions ”。对象文字表达式。在这种情况下，我们可以通过2个选项对其进行修复

使用括号，即（）
使用带有大括号的return语句，即{}

示例：

...
[server]
SSH_DOMAIN       = domain.local
DOMAIN           = domain.local
HTTP_PORT        = 8080
ROOT_URL         = https://domain.local/
DISABLE_SSH      = false
SSH_PORT         = 7999
LFS_START_SERVER = true
LFS_CONTENT_PATH = /usr/local/gitea/gitea/data/lfs
LFS_JWT_SECRET   = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
OFFLINE_MODE     = false
START_SSH_SRVER  = true
BUILTIN_SSH_SERVER_USER = 
SSH_LISTEN_PORT  = %(SSH_PORT)s
SSH_CREATE_AUTHORIZED_KEYS_FILE = true

...

Answer 14

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

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

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

Answer 15

就我而言，我在构造函数中使用逗号而不是分号。

错误示例：

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 16

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

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

预期的赋值或函数调用：无未使用的表达式ReactJS

16 个答案: