반응형
경고:목록의 각 아이는 고유한 "키" 소품을 가지고 있어야 합니다.
Google Books API를 사용하여 앱을 만들고 있으며 목록에 있는 각 아이들에게 고유한 키를 전달하고 있는 것처럼 보이지만 오류가 사라지지 않습니다.내가 뭔가 잘못하고 있는 게 틀림없는데 뭐가 잘못됐는지 모르겠어.
const BookList = (props) => {
//map over all of the book items to create a new card for each one in the list
const books = props.books.data.items.map((book) => {
console.log(book.id);
return (
<div className="col col-lg-4 grid-wrapper">
<BookCard
key={book.id}
image={book.volumeInfo.imageLinks.thumbnail}
title={book.volumeInfo.title}
author={book.volumeInfo.authors[0]}
description={book.volumeInfo.description}
previewLink={book.volumeInfo.previewLink}
buyLink={book.saleInfo.buyLink}
/>
</div>
);
});
return <div>{books}</div>;
};
반환 후에 주의해 주세요.const books
나는 가지고 있다console.log(book.id)
10개의 일의가 모두 표시됩니다.id
키를 누릅니다.하지만 이 컴포넌트의 자녀에게 전달하려고 하면key={book.id}
이 에러가 표시됩니다.
그key
가장 바깥쪽에서 반환되는 요소로 이동해야 합니다.특정의 경우, 이것은 이것을 변경하는 것을 의미합니다.
<div className="col col-lg-4 grid-wrapper">
<BookCard
key={book.id}
다음과 같이 입력합니다.
<div className="col col-lg-4 grid-wrapper" key={book.id}>
<BookCard
React fragments를 사용하여map()
단순한 구문 형식을 호출하여 다음 코드와 같은 경고가 발생하였습니다.
<>
<h3>{employee.department}</h3>
<TableRow
key={employee.id}
cellValues={["Name", "Title"]} />
<TableRow
key={employee.id}
cellValues={[employee.name, employee.title]}
/>
</>
인정된 답변을 바탕으로 ID를 얻기 위해서는 가장 바깥쪽에 있는 요소가 필요하다는 것을 깨달았습니다.아이디를 붙일 수 있는 React fragment의 대체 구문을 배웠습니다.다음과 같은 코드로 인해 경고가 사라졌습니다.
<React.Fragment key={employee.id}>
<h3>{employee.department}</h3>
<TableRow
cellValues={["Name", "Title"]} />
<TableRow
cellValues={[employee.name, employee.title]}
/>
</React.Fragment>
언급URL : https://stackoverflow.com/questions/55153873/warning-each-child-in-a-list-should-have-a-unique-key-prop
반응형
'source' 카테고리의 다른 글
타이프스크립트 이미지 Import (0) | 2023.03.20 |
---|---|
사이트를 설치할 수 없습니다. 일치하는 서비스 작업자가 검색되지 않았습니다. (0) | 2023.03.20 |
Safari 11.1: ajax/X입력[type=file]이(가) 비어 있으면 HR 양식 제출이 실패함 (0) | 2023.03.20 |
React.useMemo를 사용한 비동기 호출 (0) | 2023.03.20 |
워드프레스:기본 메뉴 항목에 URL GET 매개 변수를 추가하려면 어떻게 해야 합니까? (0) | 2023.03.20 |