ReactJS：渲染图像数组

作者: 逆转的风
发布时间: 2023-12-30 04:37:48 (6月前)
转自：

4 条回复

0#
回复此人
天线宝宝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我不能肯定地说，因为我需要看到返回数据的结构，但我对你很有信心的<strong> 不要 </强> 想要在中设置状态 <code> forEach() </code> 循环了很多次。 </p> <P> 相反，您可能希望映射数据的结果并将其转换为一些有用的对象数组，然后再将其添加到状态，以便您可以将其映射到 <code> render </code> （看起来很好）并可预测地访问内容。 </p> <P> 话虽如此，我希望你的 <code> .then() </code> 阻止之后 <code> searchPlaylists </code> 打电话看起来更像： </p> <pre> <code> const playlistsWrangled = data.playlists.items.map(plist => ({ name: plist.name, plist_id: plist.id, albumArt: plist.images[0].url })); this.setState({ playlists: wrangledPlaylists }); </code> </pre> </DIV>

编辑
1#
回复此人
遇见你 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我相信你的两个案例之间的区别在于，在“工作”案例中，你没有alt道具。 </p> <P> 如果您希望图像在加载过程中干净地显示，则必须剪切一些角落。使用逐步处理图像加载的模块，或者，如果您不关心辅助功能，请将alt标记设置为空，并为图像指定默认背景颜色（如果您希望加载后可以设置alt标记）。 </p> </DIV>

编辑
2#
回复此人
SHOU宅大可爱 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有条件的内联声明怎么样？这样它会在收到信息后呈现？ </p> <pre> <code> {this.state.playlist.name ? //have your code here to display : <LoadingSpinner /> } </code> </pre> </DIV>

编辑

登录后才能参与评论