위에서 오류가 났다. isQualified는 filter메서드에 넣어지는 함수이다.

 

해결법

1. {} 를 ()로 바꿔준다

2. {} 를 쓰고 싶다면, { return ~~~}로 작성해준다.

 

화살표 함수의 주의사항

const Button = () => (
  <button>Submit</button>
)

화살표 함수의 경우 ()로 감싸진 부분이 return으로 넘어간다

이 때에는 return을 작성해주지 않아도 된다.

 

const Button = () => {
  <button>Submit</button>
}
console.log(Button);	// undefined
}

반면에 {}로 감싸진 함수는 return이 없다면 반환하지 않는다.

 

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

따라서 {  }로 반환하고 싶다면 위처럼 작성해줘야 한다

 

 

참고, 출처: https://velog.io/@chayezo/%EC%97%90%EB%9F%AC-Expected-an-assignment-or-function-call-and-instead-saw-an-expression-no-unused-expressions

저작자표시

'문제(이슈) 해결' 카테고리의 다른 글

React.js -Maximum update depth exceeded. 해결법  (0) 2022.03.12
weather icon 넣기  (0) 2021.09.15
Uncaught TypeError: Cannot read property 'addEventListener' of null  (0) 2021.07.03

 react.dom.development.js:23803 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

 

onClick 같은 이벤트함수에서 아래와 같이 작성했을 때 위 오류가 나타나는 것 같다.

setIsEditing()을 부른다 -> 컴포넌트를 재렌더링한다 -> 다시 setIsEditing()을 부른다 => 반복

함수를 부른다? -> {} 안에 함수명+()를 쓰면 바로 호출이라는 의미이다

 

그래서 함수를 무한정으로 다시 부르고 싶지 않다면 아래와 같은 코드로 작성하거나, 매개변수가 없을 땐 ()는 붙이지 않고 함수명만 작성해놔야 한다.

 

++) React 이벤트의 특징: 이벤트에 실행할 코드를 전달 (x) => 함수 형태의 객체를 전달 (o)

이벤트에 실행할 코드를 전달한다면, 이벤트가 호출되는 것으로 간주하여 바로 실행되고, 제대로 연결이 되지 않는다.

화살표 함수를 이용한 콜백 함수의 형태로 전달해야 한다.

 

참고, 출처: https://kss7547.tistory.com/36

"내가 어떤 문제가 있었고, 이것을 해결하기 위해 이렇게 작성했다"
저작자표시

'문제(이슈) 해결' 카테고리의 다른 글

Expected an assignment or function call and instead saw an expression no-unused-expressions  (0) 2022.03.13
weather icon 넣기  (0) 2021.09.15
Uncaught TypeError: Cannot read property 'addEventListener' of null  (0) 2021.07.03

원랜 칙칙하게 clouds/27.94 Dongjinwon으로 되어 있었는데 위 그림처럼 아이콘이랑 배치를 바꿔봤다...

icon을 넣는 것을 css로 안하고 일단 weatherapi에서 제공하는 링크로 만들어봤다. 나중에는 fontawesome를 적용해서 더 예쁜 아이콘을 찾아보려고 한다... 좀더 나중에... 저거 하는데도 시간 많이 잡아먹음.....

그래도 다 하고 나니 뿌듯하다.

09.15 완성본(1)
09.15 완성본(2)

그래도 아이콘 하나 바꾸고 폰트랑 배경이미지 바꿨다고 좀 이뻐진 것 같다..

 

index.html
weather1.js
weather.css

아이콘 이미지가 안나오길래 매우 당황했었다. 보니까 index.css에서 #bgImage{}로 안하고 그냥 img{}로만 해서 배경이미지에만 적용돼야 할 css가 아이콘 이미지에도 적용이 돼서 안나온 것이었다. 

 

막상 결과물을 보니까 다행이긴 한데, 이러다간 내 미간 주름은 계속 생길 일만 남을 것 같다. 오지마...

저작자표시

'문제(이슈) 해결' 카테고리의 다른 글

Expected an assignment or function call and instead saw an expression no-unused-expressions  (0) 2022.03.13
React.js -Maximum update depth exceeded. 해결법  (0) 2022.03.12
Uncaught TypeError: Cannot read property 'addEventListener' of null  (0) 2021.07.03 
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Momentum</title>
</head>
<body>
    <div id="login-form">
        <input type="text" placeholder="what is your name?" />
        <button>Log In</button>
    </div>
    <script src="app.js"></script>
</body>

</html>


const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

function onLoginBtnClick() {
    console.log("hello", loginInput.value);
}

loginButton.addEventListener("click", onLoginBtnClick);

Uncaught TypeError: Cannot read property 'addEventListener' of null

console에서 위같은 에러가 났다.

 

html의 button을 변수 loginButton에 담았다고 생각했지만 사실은 담기지 않은 것이다. 

 

html이 로드되기 전에 js가 먼저 로드됐기 때문에 btn변수에 html요소를 담으려니 null이기 때문에 에러가 난 것이더.

그래서 script를 html아래에 작성했다.

 

이외에 script 태그에 async옵션을 추가하는 방법도 있다.

<script asyn src="app.js"></script>

참고 : https://www.youtube.com/watch?v=tJieVCgGzhs

저작자표시

'문제(이슈) 해결' 카테고리의 다른 글

Expected an assignment or function call and instead saw an expression no-unused-expressions  (0) 2022.03.13
React.js -Maximum update depth exceeded. 해결법  (0) 2022.03.12
weather icon 넣기  (0) 2021.09.15

+ Recent posts

티스토리툴바