Reactjs过滤器然后地图功能不显示图像？不是重新渲染吗？

Question

我有一个简单的filter((.map((函数：

return (<div>{
result.filter((book)=> book.volumeInfo.matureRating == "NOT_MATURE").map((book=> (
<img src={book.volumeInfo.imageLinks.thumbnail} alt={book.title} key={book.id}/>
)))      
}</div>)

我正在尝试显示已筛选书籍的缩略图。我在控制台日志中看到，它只是这样做，但没有显示缩略图。我不完全确定为什么，因为我是React的新手。

有什么建议吗？

编辑：Result从Google Books API返回一个JSON对象。这里有一个狙击坑：

allowAnonLogging: true
authors: ["Wendelin Van Draanen"]
averageRating: 4
canonicalVolumeLink: "https://play.google.com/store/books/details?id=LbmL1pKL3dMC"
categories: ["Juvenile Fiction"]
contentVersion: "1.9.6.0.preview.3"
description: "Sometimes it's hard to tell the saints from the sinners... Sammy was supposed to be in church to get out of trouble, not into more. But while she's at St. Mary's working off some school detention time, a valuable cross goes missing and Sammy becomes the prime suspect. She knows she's innocent, and also what it feels like to lose something important. Her treasured catcher's mitt has been stolen--heartless Heather must have taken it to throw Sammy off her game in the upcoming softball play-offs. Trouble is, it's working. Sammy needs that glove back. Throw in nuns in feather boas, a homeless girl in high-tops, a carrot-chomping dog, and a safe that needs cracking, and you've got just another week in the life of Sammy Keyes. Praise for the Sammy Keyes series: “Sammy Keyes is feisty, fearless, and funny. A top-notch investigator!” —New York Times bestselling author Sue Grafton “The sleuth delights from start to finish. Keep your binoculars trained on Sammy Keyes.” —Publishers Weekly “Sammy Keyes is the hottest sleuth to appear in children’s books since Nancy Drew.”—The Boston Globe"
imageLinks: {smallThumbnail: "http://books.google.com/books/content?id=LbmL1pKL3…=frontcover&img=1&zoom=5&edge=curl&source=gbs_api", thumbnail: "http://books.google.com/books/content?id=LbmL1pKL3…=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"}
industryIdentifiers: (2) [{…}, {…}]
infoLink: "https://play.google.com/store/books/details?id=LbmL1pKL3dMC&source=gbs_api"
language: "en"
maturityRating: "NOT_MATURE"
pageCount: 240
panelizationSummary: {containsEpubBubbles: false, containsImageBubbles: false}
previewLink: "http://books.google.com/books?id=LbmL1pKL3dMC&printsec=frontcover&dq=javascript:keyes&hl=&cd=10&source=gbs_api"
printType: "BOOK"
publishedDate: "2008-12-24"
publisher: "Yearling"
ratingsCount: 3
readingModes: {text: true, image: true}
title: "Sammy Keyes and the Sisters of Mercy"

Answer 1

book.volumeInfo对象没有matureRating。我想你是想放maturityRating。因此，您可能会得到一个空的筛选列表。

更改

return (<div>{
result.filter((book)=> book.volumeInfo.matureRating == "NOT_MATURE").map((book=> (
<img src={book.volumeInfo.imageLinks.thumbnail} alt={book.title} key={book.id}/>
)))      
}</div>)

至

return (<div>{
result.filter((book)=> book.volumeInfo.maturityRating == "NOT_MATURE").map((book=> (
<img src={book.volumeInfo.imageLinks.thumbnail} alt={book.title} key={book.id}/>
)))      
}</div>)