상태관리와 props2에서 map 에서 오류
277
작성자 없음
작성한 질문수 0
'void[]' 형식은 'ReactNode' 형식에 할당할 수 없습니다.
'void[]' 형식은 'Iterable<ReactNode>' 형식에 할당할 수 없습니다.
'[Symbol.iterator]().next(...)'에서 반환되는 형식은 해당 형식 간에 호환되지 않습니다.
'IteratorResult<void, any>' 형식은 'IteratorResult<ReactNode, any>' 형식에 할당할 수 없습니다.
'IteratorYieldResult<void>' 형식은 'IteratorResult<ReactNode, any>' 형식에 할당할 수 없습니다.
'IteratorYieldResult<void>' 형식은 'IteratorYieldResult<ReactNode>' 형식에 할당할 수 없습니다.
'void' 형식은 'ReactNode' 형식에 할당할 수 없습니다.ts(2322)
{todos.map((todo) => (
<TodoItem key={todo.id} {...todo} />
))}위 코드에서 이런 오류가 발생합니다 왜이러는걸까요?
아래는 todoItem입니다
import React from "react";
import { Todo } from "../model/types";
const TodoItem = ({ id, content }: Todo) => {
return <div>{content}</div>;
};
export default TodoItem;
코드엔 문제가 없어보이고 실행도 되는데 오류가 발생하는 이유가 뭘까요
답변 2
0
안녕하세요 이정환입니다.
음 아마 todos 데이터가 정상적으로 전달되지 못했기 때문에 발생하는 오류인 것 같습니다. console.log나 React Develoepr Tools 등을 이용해 todos 데이터가 배열 형태로 잘 전달 되었는지 확인해보시면 좋을 것 같아요!
0
안녕하세요, 인프런 AI 인턴입니다.
eko09님의 질문과 관련해 보니, React 컴포넌트에서 map 메서드를 사용하여 여러 개의 컴포넌트를 렌더링할 때 발생하는 타입 관련 오류로 보입니다. 여기서 주요한 점은 JavaScript 및 TypeScript에서 map 메서드를 사용할 때 각 항목에 대해 반환될 요소를 명확히 지정해야 한다는 것입니다. 오류 메시지는 반복되는 각 항목을 렌더링하기 위해 map 함수 내부에서 반환되는 요소의 타입이 명확하지 않아 발생합니다.
이와 유사한 문제와 그에 대한 해결책을 설명하는 기존 답변을 찾았습니다. 질문자님이 겪고 계신 문제는 map 함수 내부에서 JSX 요소를 제대로 반환하지 않아 발생하는 오류와 관련이 있습니다. 간혹 이러한 문제는 함수의 반환 타입을 명시적으로 지정하지 않아 발생할 수 있습니다.
유사한 질문에 대한 답변
- “상태관리와 Props2에서 todos.map 렌더링시 에러(4:30)” 에서는 비슷한 맥락으로
map함수를 사용할 때 발생한 오류와 그에 대한 해결책을 제공합니다. 이 질문에서 질문자는map메서드를 이용한 배열의 렌더링 과정에서return을 명시적으로 사용하지 않아 TypeError를 경험합니다. 해결책으로는 화살표 함수에서 JSX 요소를 반환할 때 중괄호{}대신 소괄호()를 사용하여 직접 반환되도록 수정하는 방법이 제시되어 있습니다.
이 기존 답변의 내용으로 볼 때, eko09님이 제공한 코드는 문제가 없어 보이며, 설명된 오류에 대한 해결 방법도 코드 상에 이미 적용된 상태입니다. 즉, 화살표 함수 내에서 소괄호를 사용하여 JSX 요소를 바르게 반환하고 있습니다.
{todos.map((todo) => (
<TodoItem key={todo.id} {...todo} />
))}
따라서, 제시된 오류 메시지와 제공된 코드 상태를 볼 때 다른 복잡한 문제(예: TypeScript 설정, React와 TypeScript의 호환성 문제 등)가 원인일 수 있습니다. 정확한 해결책을 찾기 위해선 개발 환경, tsconfig 설정 등 추가 정보가 필요할 수 있습니다.
혹시 이 추측이 정확하지 않거나 여전히 해결되지 않는다면, 구체적인 개발 환경 정보(예: TypeScript 버전, React 버전 등)와 함께 추가 질문을 해주시면 더욱 정확한 답변을 드릴 수 있을 것 같습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
제네릭 클래스 핸드북 페이지가 undefined라고 나옵니다.
0
17
2
적절한 타입 찾기 React.ChangeEvent<HTMLInputElemen>
0
33
2
outDir 옵션 추가 후 컴파일 오류 질문
0
67
1
호출 시그니처 질문
0
68
2
서로소 유니언 타입이 discriminated union과 동의어 인가요?
0
77
2
조건부타입소개 중 함수오버로딩 활용 시 인수의타입과 함수의 반환값의 타입이 깨지는 문제
0
70
1
할인쿠폰 관련하여
0
162
2
프론트엔드에서의 인터페이스활용
0
96
2
안녕하세요 이정환님!
0
94
1
Node.js 설치에 관한 질문입니다.
0
80
2
함수 타입 호출 시그니처
0
60
1
35강. 모듈 보강은 라이브러리 파일을 직접 편집해야 하나요?
0
67
2
인터페이스 문법이 있는데 타입 별칭 문법은 왜 있나요?
0
120
4
마우스 호버 시 정보
0
93
2
vite으로 리액트 빌드하기를 업데이트해주세요.
1
91
2
타입가드를 만들어 사용하는 이유가 궁금합니다.
0
85
2
섹션 12가 너무 어려운데... 정상이겠죠..?
0
139
2
선생님.. 알고리즘도 강의해주시면안되나요
0
103
2
선생님은 어떻게 이런걸 아세요?
0
131
1
type: module
0
99
2
7:17초 업캐스팅 질문이있습니다!
0
79
1
슈퍼타입질문
1
66
2
프로젝트 설치
0
107
2
enum은 비원시 타입이면서 열거형 타입이 되는건가요?
0
72
2