Ожидаемое присвоение или вызов функции: без неиспользуемых выражений ReactJS

Это происходит из-за того, что вы поместили скобку return в следующую строку. Это может быть распространенной ошибкой, если вы пишете js без точек с запятой и используете стиль, в котором открывающиеся фигурные скобки помещаются в следующую строку.

Интерпретатор считает, что вы вернули undefined, и не проверяет вашу следующую строку. Это операторская штука return.

Разместите открытую скобу на одной линии с return.

В моем случае я никогда не помещал возвращение в стрелочную функцию так что мой код следует

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

В моем случае у меня были фигурные скобки вместо скобок.

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

Где это должно было быть:

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

Причина этого, как объяснено в MDN Docs, заключается в том, что функция стрелки, заключенная в (), будет возвращать значение, которое она обертывает, поэтому, если я хотел использовать фигурные скобки, мне пришлось добавить ключевое слово return, например:

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

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;

Для меня ошибка возникла при использовании карты. И я не использовал оператор return внутри карты.

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

Выше кода возникла ошибка.

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

Простое добавление return решило эту проблему.

В моем случае ошибка произошла из-за новой строки после оператора 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>
);

Вместо того

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

Используйте код ниже

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

Обычно используйте скобку "(" в той же строке возврата, что и "возвращение(". Это решит эту проблему. Спасибо.

Если вы используете 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>;
        ));

В моем случае я получил эту ошибку, потому что использовал вызов внутри условия без точки с запятой:

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

В моем случае я получил ошибку в строке setState:

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

Поменял на это, теперь работает

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

    return {
      count
    };
  });
}

Я столкнулся с той же ошибкой с приведенным ниже кодом.

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

В моем случае это произошло из-за фигурных скобок функции, если вы используете jsx, вам нужно изменить фигурные скобки на круглые скобки, см. Код ниже

const [страны] = useState (["США", "Великобритания", "BD"])

I tried this but not work, don't know why

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

But when I change Curly Braces to parentheses and Its working fine for me

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

Надеюсь, это поможет и вам ...

Ошибка - «Ожидал присвоения или вызова функции, а вместо этого увидел выражение no-unused-expressions» возникает, когда мы используем фигурные скобки, т.е. {}, чтобы вернуть буквальное выражение объекта. В таком случае мы можем исправить это двумя способами.

1. Используйте круглые скобки, т.е. ()
2. Используйте оператор return с фигурными скобками, т.е. {}

Пример :

const items = ["Test1", "Test2", "Test3", "Test4"];
console.info(articles.map(item => { `this is ${item}` })); // wrong
console.info(items.map(item => (`this is ${item}`))); // Option1
console.info(items.map(item => { return `this is ${item}` })); // Option2

На случай, если у кого-то возникнет такая же проблема, как у меня. Я использовал круглые скобки с оператором return в той же строке, в которой я написал остальную часть кода. Кроме того, я использовал функцию карты и реквизиты, поэтому у меня было так много скобок. В этом случае, если вы новичок в React, вы можете избегать скобок вокруг реквизита, потому что теперь все предпочитают использовать функции стрелок. И в функции карты вы также можете избежать скобок вокруг обратного вызова функции.

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

вот так. В приведенном выше примере кода вы можете видеть, что слева от обратного вызова функции есть только открывающая скобка.

В моем случае я использовал в конструкторе запятые вместо точки с запятой.

Пример с ошибками:

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

Это непростой вопрос. Когда вы используете ключевое слово return, просто убедитесь, что НАЧАЛО скобки НАХОДИТСЯ НА ОДНОЙ СТРОКЕ, что и ключевое слово return. Если вы это сделаете, все должно работать нормально. Если вы этого не сделаете, вы получите указанную выше ошибку.

Я добавил диаграмму, чтобы (надеюсь) сделать ее максимально понятной для всех и избавить некоторых из вас от необходимости покупать себе новый монитор. Надеюсь, это предельно ясно, и если не напишу комментарий, я постараюсь его отредактировать.

Просто хочу добавить свое решение на случай, если кто-то еще столкнется с этой ошибкой. В моем случае это не имело ничего общего с скобками, стрелочной функцией или отсутствующим оператором возврата. У меня был такой чек

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

Мне пришлось удалить это, после чего ошибка исчезла. Разобраться в этом было сложно, потому что сообщение об ошибке не было описательным.