Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

reactjs - Warning: Each child in a list should have a unique "key" prop

I'm building an app using the google books API and I appear to be passing a unique key to each child in the list, but the error won't go away. I must be doing something wrong but I'm not sure what.

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>
    );
}

Notice that after the return in const books I have a console.log(book.id), which will display all 10 unique id keys in the console. But when I try to pass it to the child of this component using key={book.id}, I get this error.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The key needs to go on the outermost returned element. In your specific case, that means changing this:

            <div className="col col-lg-4 grid-wrapper">
                <BookCard 
                    key={book.id}

to this:

            <div className="col col-lg-4 grid-wrapper" key={book.id}>
                <BookCard 

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...