대응: 할당 또는 함수 호출이 예상되고 대신 식이 표시됨

대응: 할당 또는 함수 호출이 예상되고 대신 식이 표시됨

이 보풀 오류를 라인에서 수정하려고 합니다.const def = (props) => {를 참조해 주세요.

const propTypes = {
prop1: PropTypes.string,
prop2: PropTypes.string,
prop3: PropTypes.string,
prop4: PropTypes.string,
prop5: PropTypes.string,
}

const abc = (props) => {
some code here }

const def = (props) => {
<div>
<div className=" ..some classes..">{abc}</div>
<div className=" ..some classes..">{t('translation/something')}</div>

<div ...>
  <someComponent 
    do something
  />

if (some condition) {
do this
} else {
do that
}

</div>

};

왜 보풀 오류가 발생하는지 아십니까?

당신은 적어도 당신의 스니펫과 코멘트에서 아무것도 반환하지 않습니다.

const def = (props) => { <div></div> };

이것은 아무것도 반환하지 않습니다. 화살표 함수의 본문을 물결 괄호로 감싸고 있지만 반환 값이 없습니다.

const def = (props) => { return (<div></div>); };또는const def = (props) => <div></div>;

한편, 이 2개의 솔루션은 유효한 React 컴포넌트를 반환하고 있습니다.또, 이 내면에 있는 것은jsx(@Adam에서 언급한 바와 같이) 를 사용할 수 없습니다.if ... else ...삼원 연산자만 사용할 수 있습니다.

할당 또는 함수 호출이 예상되어 식이 표시되었습니다.

이 코드에서도 같은 에러가 발생했습니다.

const mapStateToProps = (state) => {
    players: state
}

수정하려면 곡선 괄호 주위에 괄호만 추가하면 됩니다.

const mapStateToProps = (state) => ({
    players: state
});

return 스테이트먼트는 한 줄에 넣어야 합니다.또는 HTML 문을 바인드하고 있는 괄호를 삭제하는 방법도 있습니다.

예:

return posts.map((post, index) =>
    <div key={index}>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
    </div>
);

해결책에 대해서는 확실하지 않지만 임시 회피책은 eslint에게 문제행 상단에 다음 사항을 추가하여 무시하도록 요청하는 것입니다.

// eslint-disable-next-line @typescript-eslint/no-unused-expressions

가능한 방법은 다음과 같습니다(어레이 선언을 DB 또는 다른 외부 리소스에서 가져오기로 변경할 수 있습니다).

const MyPosts = () => {

  let postsRawData = [
    { id: 1, text: 'Post 1', likesCount: '1' },
    { id: 2, text: 'Post 2', likesCount: '231' },
    { id: 3, text: 'Post 3', likesCount: '547' }
  ];

  const postsItems = []
  for (const [key, value] of postsRawData.entries()) {
    postsItems.push(<Post text={value.text} likesCount={value.likesCount} />)
  }

  return (
      <div className={css.posts}>Posts:
          {postsItems}
      </div>
  )
}

함수 컴포넌트를 사용합니다.

const def = (props) => {
<div>
<div className=" ..some classes..">{abc}</div>
<div className=" ..some classes..">{t('translation/something')}</div>

<div ...>
<someComponent 
 do something
/>

if (some condition) {
do this
} else {
do that
}

 </div>

};

함수 컴포넌트에서는 반환을 쓰거나 괄호만 추가해야 합니다.반환 또는 괄호를 추가한 후 코드는 다음과 같습니다.

const def = (props) => ({
<div>
<div className=" ..some classes..">{abc}</div>
<div className=" ..some classes..">{t('translation/something')}</div>

<div ...>
<someComponent 
 do something
/>

if (some condition) {
do this
} else {
do that
}

 </div>
});

저 같은 경우에는eslint예기치 않은 사용 사례로 인해 오류가 발생했습니다.따라서 코드는 올바르지만 실패했습니다.

cy.customCommand().then(obj => {
      expect(obj.booleanProp).to.be.true;
    });

eslint 는 생성되지만 사용되지 않는 식을 찾습니다.생성 결과(잠재적 예외)는 분석기 범위를 벗어납니다.

을 변호하기 위해eslint분석기가 이 부작용을 예상할 수는 없습니다.그리고 가장 중요한 사용 사례(완료되지 않은 코드 라인이 없도록 함)가 중요합니다.그러니 탓할 사람은..

경고는 다음과 같이 행별로 비활성화할 것을 권장합니다.

cy.customCommand().then(obj => {
      // eslint-disable-next-line no-unused-expressions
      expect(obj.booleanProp).to.be.true;
    });

이 오류는 return before 문을 추가하지 않으면 발생합니다.

내 경우, 사용 중

str.charAt(0). UpperCase() + str.슬라이스(1);

틀렸습니다.이 문 앞에 반환을 추가해야 합니다.

이것처럼.

str.charAt(0)를 UpperCase() + str로 반환합니다.슬라이스(1);

도움이 되길 바랍니다.

이 경우 스위치블록에 디폴트 지시가 있는 행이 문제였습니다.

  handlePageChange = ({ btnType}) => {
    let { page } = this.state;
    switch (btnType) {
      case 'next':
        this.updatePage(page + 1);
        break;
      case 'prev':
        this.updatePage(page - 1);
        break;
      default: null;
    } 
  }

대신

default: null;

회선

default: ;

날 위해 일했어

장애는 if 스테이트먼트 내에 있습니다.얼마 전에 같은 에러가 발생했습니다.3진 연산자 내에서 쉼표로 구분된 코드의 행이 있다는 것을 알게 되었습니다.그것은, 스테이트먼트에 같은 에러가 있는 경우에 사용하는 것으로 바뀌었습니다.

식을 구분하여 각각 다른 if 스테이트먼트(3진 연산자와도 연동)를 부여하여 수정했지만, 결국 중복 코드가 너무 많았습니다.짜증나는.그 후 해결책을 찾지 못했다.

첫째, 다음과 같이 함수의 부모 div 태그 앞에 하나 이상의 "반환"이 있어야 합니다.

const def = (props) => {    
   return(
       <div>
        [some other child div/codes here]    
       </div>
   )
};

또는 다음과 같이 한 줄에 화살표 함수를 사용할 수 있습니다.

const def = (props) => `<div> [some other child div/codes here] </div>`

경우, 「 」"return"강제성이 없습니다.

둘째, "조건부 (3진수) 연산자"를 사용해야 합니다.

대부분의 경우 이 오류는 올바르게 반환되지 않기 때문에 발생합니다.가장 일반적인 해결책은 함수의 중괄호 {} 주위에 괄호() 쌍을 넣는 것입니다.

다음 코드는 에러를 발생시킵니다.돌아올 수 없다는 걸 명심해

const MyComponent= (state) => {
    anything: state;
}

이렇게 써야 오류가 안 나요.

const MyComponent= (state) => ({
    anything: state
});

언급URL : https://stackoverflow.com/questions/45573277/react-expected-an-assignment-or-function-call-and-instead-saw-an-expression