TypeError: prevState.boardId is not iterable

prevState.boardId가 존재하지 않거나 배열이 아니라서 iterable(반복 가능)하지 않다는 뜻

 

에러가 났다

const onValid = (todo: IForm) => {
    const newTodo: ITodo = {
      id: Date.now(), // 고유한 ID 생성
      text: todo.todo,
    };
    setToDos((prevState) => ({
      ...prevState,
      boardId: [...prevState.boardId, newTodo],
    }));
    setValue("todo", ""); // 입력 필드 초기화
  };

 

boardId에 내가 접근하고 싶은 부분의 이름 (Doing, Done...)이 들어있기 때문에 prevState.boardId라고 접근했다

 

 

 

 

prevState["Doing"] // ✅ 올바른 접근 방법
prevState.Doing // ✅ 가능
prevState.boardId // ❌ boardId라는 키가 없음 (오류 발생)

 

안된댄다

 

저런식으로 정확한 이름을 부여하는 것만 가능하다 함.

 

setToDos((prevState) => ({
      ...prevState,
      [boardId]: [...prevState[boardId], newTodo], // ✅ 올바르게 boardId 접근
    }));

이렇게 적는게 맞다네 prevState[boardId]라고 적어줄 것.

또, boardId를 멤버의 이름으로 할당해줄 것