inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

실전 리액트 프로그래밍

reselect로 선택자 함수 만들기

저도 ReferenceError가 나는데 원인을 못 찾았습니다...

442

suyeon.DV

작성한 질문수 4

0

ReferenceError: Cannot access 'friendsWithAgeShowLimit' before initialization

(anonymous function)
C:/Users/la21/OneDrive/바탕 화면/chapter6_using_react-redux/src/friend/container/FriendMain.js:17
  14 | ] = useSelector((state) => {
15 | const { ageLimit, showLimit, friends } = state.friend;
16 | const friendsWithAgeLimit = friends.filter((item) => item.age <= ageLimit);
> 17 | return [
| ^ 18 | ageLimit,
19 | showLimit,
20 | friendsWithAgeLimit,

이렇게 에러가 났는데요. 

혼자서 찾아봤는데도 원인을 못 찾았습니다.

import 할 때 js 확장자 다 없이 했고

밑에 분처럼 node_modules와 package_lock.json 삭제 후 다시 install 했는데도 계속 같은 에러가 나고 있습니다. 

짐작가시는 원인이 있으실까요? 

혹시 몰라서 FriendMain.js  코드 첨부합니다.

import { getNextFriend } from "../../common/mockData";
import { addFriend, setAgeLimit, setShowLimit } from "../state";
import FriendList from "../component/FriendList";
import NumberSelect from "../component/NumberSelect";
import { shallowEqual, useSelector, useDispatch } from "react-redux";
import { MAX_AGE_LIMIT, MAX_SHOW_LIMIT } from "../common";

export default function FriendMain() {
  const [
    ageLimit,
    showLimit,
    friendsWithAgeLimit,
    friendsWithAgeShowLimit,
  ] = useSelector((state) => {
    const { ageLimit, showLimit, friends } = state.friend;
    const friendsWithAgeLimit = friends.filter((item) => item.age <= ageLimit);
    return [
      ageLimit,
      showLimit,
      friendsWithAgeLimit,
      friendsWithAgeShowLimit.slice(0, showLimit),
    ];
  }, shallowEqual);
  const dispatch = useDispatch();

  function onAdd() {
    const friend = getNextFriend();
    dispatch(addFriend(friend));
  }

  return (
    <div>
      <button onClick={onAdd}>친구 추가</button>
      <NumberSelect
        onChange={(v) => dispatch(setAgeLimit(v))}
        value={ageLimit}
        options={AGE_LIMIT_OPTIONS}
        postfix="세 이하만 보기"
      />
      <FriendList friends={friendsWithAgeLimit} />
      <NumberSelect
        onChange={(v) => dispatch(setShowLimit(v))}
        value={showLimit}
        options={SHOW_LIMIT_OPTIONS}
        postfix="명 이하만 보기(연령 제한 적용)"
      />
      <FriendList friends={friendsWithAgeShowLimit} />
    </div>
  );
}

const AGE_LIMIT_OPTIONS = [15, 20, 25, MAX_AGE_LIMIT];
const SHOW_LIMIT_OPTIONS = [2, 4, 6, MAX_SHOW_LIMIT];

react redux

답변 2

0

suyeon.DV

답변이 너무 늦어 죄송합니다. 

저의 오타였다니 너무 부끄럽네요. 

봐주셔서 감사합니다ㅜㅜ

0

이재승

안녕하세요
아래처럼 수정하시면 될 것 같네요

friendsWithAgeShowLimit.slice(0, showLimit)
==>
friendsWithAgeLimit.slice(0, showLimit)

자동완성기능이 안되네요 ..

0

499

3

화면에 에러가나네요 ...

0

515

2

setValue 함수 질문 있습니다.

0

840

1

찾아야한다 실습 문의

0

469

1

훅 기초 익히기 - 배치 처리와 순차적 처리의 차이

0

470

1

cra, next.js 관련 질문 드립니다!

0

605

1

useState 배열 비구조화 문법 질문!

0

252

1

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

1

1081

2

Saga 오류 이거 혹시 왜이런지 알수 있을까요?

0

370

2

http://localhost:3001/user/search?keyword=u 이걸로 데이터를 보는데 저는 사이트에 연결할 수 없다고 나오네요

0

657

1

match

1

494

1

버튼이 생성되지 않습니다 .

0

286

1

혹시 import 옆에 파일 사이즈 표시 어떻게 하나요?

0

262

1

saga 문제

0

248

1

에러가 발생하는데 이유가뭘까요..?

0

388

2

선생님과 똑같이 했는데 다 rendering 됩니다.

0

202

1

컴포넌트와 컨테이너의 기준

0

315

1

커스텀훅의 개념과 함수차이

1

1198

1

useEffect 실전 활용법(1) 강의에서 질문있습니다.

0

337

1

리덕스, 사가파일들의 관리

0

207

1

useImperativeHandle 질문 입니다.

0

280

1

컴파일 문의드립니다.

0

203

1

React.memo 관련 질문이 있습니다.

0

373

1

Context API vs Redux 사용 빈도

0

212

1