programing

예상되는 할당 또는 함수 호출: no-used-expressions ReactJS

lovejava 2023. 2. 28. 23:08

예상되는 할당 또는 함수 호출: no-used-expressions ReactJS

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;

리액트는 처음이며, 이 코드의 경우 이 에러가 발생합니다.

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

어디가 틀렸는지 모르겠어요. 도와주세요.

이것은, 다음의 괄호를 붙이기 위해서 발생합니다.return다음 줄에세미콜론 없이 js를 쓰고 다음 줄에 열린 중괄호를 넣는 스타일을 사용하는 경우 이는 일반적인 실수일 수 있습니다.

인터프리터는 당신이 정의되지 않은 상태로 돌아온다고 생각하고 다음 행을 확인하지 않습니다.그게 바로return오퍼레이터 일

저 같은 경우에는 괄호 안에 넣어야 할 곳에 곱슬곱슬한 교정기가 있었어요.

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

있어야 할 위치:

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

MDN Docs에서 설명한 바와 같이 화살표 함수는 다음과 같이 둘러싸여 있습니다.()반환되는 값은 반환되기 때문에, 곱슬곱슬한 괄호를 사용하려면,return다음과 같은 키워드:

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

저는 지도를 사용할 때 오류가 발생했습니다.그리고 지도 안에 있는 반품 명세서를 사용하지 않았어요.

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

위의 코드가 에러를 발생.

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

반품만 더하면 해결된다.

중괄호가 있는 함수 내에서 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>;
        ));

내 경우 화살표 함수에 리턴을 넣지 않기 때문에 코드는 다음과 같습니다.

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

내 경우 오류가 발생한 이유는 다음 줄의 새 행이기 때문입니다.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>
);

제 경우 컨스트럭터에서 세미콜론 대신 쉼표를 사용했습니다.

오류가 있는 예:

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

당신에게도 도움이 되길 바랍니다...

솔루션:개방 브래킷의 시작을 이동합니다...

브래킷의 시작 부분을 이동합니다.

return 키워드를 사용하는 경우 브래킷의 START가 다음 명령어와 같은 라인 상에 있는지 확인합니다.return키워드를 지정합니다.이렇게 하지 않으면 벌레가 생길 거예요.

는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★,;

여기서부터 변경

<Button
    onClick={() => {
        function1(), function2();
    }}>
    Click
</Button>

여기에

<Button
    onClick={() => {
        function1();
        function2();
    }}>
    Click
</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;

이 경우 조건 내에서 세미콜론 없이 콜을 사용했기 때문에 다음 오류가 발생합니다.

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

오류: "할당 또는 함수 호출이 예상되고 대신no-unused-expressions보았습니다."는 물결 괄호(예: {})를 사용하여 개체 리터럴 식을 반환할 때 발생합니다.이 경우 2가지 옵션으로 수정할 수 있습니다.

  1. 괄호 사용 ( )
  2. 반환문(예: {})은(는) 중괄호로 묶음

예:

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

나처럼 문제가 생겼을 때를 대비해서 말이야나머지 코드를 작성한 행과 같은 행에 반품 명세서와 함께 괄호를 사용하고 있었습니다.그리고 지도 기능과 소품을 사용해서 괄호도 많이 받았어요.이 경우 React를 처음 사용하는 경우 누구나 화살표 기능을 사용하는 것을 선호하기 때문에 소품 주위에 괄호를 사용하지 않아도 됩니다.또한 맵 함수에서는 함수 콜백 주위에 괄호를 붙이지 않아도 됩니다.

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

그렇게.위의 코드 샘플에서는 함수 콜백 왼쪽에 괄호만 열려 있는 것을 알 수 있습니다.

대신

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

아래 코드 사용

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

기본적으로 "return()"과 같은 반환 행에 괄호("")를 사용합니다.이 문제는 해결됩니다.감사해요.

제 경우 setState 행에서 다음 오류가 발생하였습니다.

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

이걸로 바꿨는데 이제 되네

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

    return {
      count
    };
  });
}

다른 사용자가 이 오류를 겪고 있는 경우를 대비해서 솔루션을 추가하고 싶습니다.제 경우 괄호, 화살표 기능, 반품 누락문과는 아무런 관련이 없습니다.나는 이런 수표를 받았다.

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

이걸 지우고 나서 오류가 사라졌어요.에러 메세지에 설명이 전혀 없기 때문에, 이것을 이해하는 것은 어려웠습니다.

언급URL : https://stackoverflow.com/questions/53013437/expected-assignment-or-function-call-no-unused-expressions-reactjs