Uncaught runtime errors: is not iterable

 

에러를 보니 prevLetter is not iterable 

interable 에러는 Array, String, Map, 생성자 결과와 같은 것이 " 너 지금 값 잘못주고 있잖아!! 나보고 어쩌라고!!! "

하고 화를 내는 것이다.

 

수정 전 코드 

  const onSubmit = (prevLetterse) => {
    const newLetter = [...prevLetterse].map(
      (prevLetters) => prevLetters.id === letters.id
    );
    setLetters(newLetter);
  };

 

 

내가 생각했을 때에는 

  const onSubmit = (이전 배열들) => {
    const newLetter = [...이전 배열을 펼쳐서].map(
      (이전배열에) => 이전 배열들의 아이디 중 === 배열중 하나의 아이디와 같이 같으면
    );
    setLetters(기존 배열에 값을 집어 넣어);
  };

이런 의미로 코드를 만들었었다.

 

❓문제점

① const onSubmit = (prevLetterse) =>
→ prevLetterse는 다른 곳에서 이전 배열을 받아오기 위해서 사용하고 있으나,
현재 인자로 받아야하는 값은 기존 객체를 업데이트 해서 바꿔줄 역할을 하는 객체가 필요하다.
그래서 react에서prevLetterse 를 여기서 사용한다고 하니 화가 났다!!!!!!! 


② [...prevLetterse].map
→ map을 사용하면 배열로 뱉어 줄 텐데 배열에서 배열을 빼서 다시 map으로 배열을 만들고 있다

③ map은 return을 이용해 새로운 배열을 만들어 주는데 return이 없어서 prevLetters.id === letters.id 를 통해
비교해서 true 또는 false만 뱉어내는중 (기본적으로 map은 새로운 배열 만들어줄때 쓰는애임...)
그러니 객체 아니라고 빼액!!

④ 코드 내용대로라면 prevLetterse 값을 이용해서 항상 이전 값을 받아오게 해 씹히는게 없이 구현하고자 했으나
결국 setLetters에 newLetter을 때려 박음으로써 무용지물인 코드

 

 

 

수정된 코드

  const onSubmit = (nextLetter) => {
    setLetters((prevLetters) =>
      prevLetters.map((letter) => {
        if (nextLetter.id === letter.id) {
          return { ...letter, ...nextLetter };
        }
        return letter;
      })
    );
  };

 

💡해결

① react가 헷갈리지 않도록 nextLetter라는 이름으로 어떤 역할을 하는지 명확히 해줌

② prevLetters.map으로 제대로 변경 하고 이전 배열 중 하나의 객체를 받을 수 있도록 수정

③ return을 이용해 [ ]  배열 안에서 letter 객체요소를 nextLetter 객체요소로 변경, 아니면 그냥 기존 letter 그대로

④ setLetter 안에서 이전 값을 이용해 새로운 배열을 만들어 낼 수 있도록 구현