ReactJS：渲染图像数组

Posted 2023-02-22

【中文标题】ReactJS：渲染图像数组

【英文标题】：ReactJS: Rendering an array of images

【发布时间】：2019-08-04 15:03:04

【问题描述】：

我还是 ReactJS 的新手，我目前正在摆弄 Spotify API，它工作得很好，但是我在尝试渲染通过 API 检索到的图像数组时偶然发现了一个问题。 起初，我尝试在 render() 组件中调用它，但它只生成一个空的“未定义”图像列表，只显示 alt 属性。其次，我在return()里面试了一下，症状和前者一样，这次完全没有任何图像。

这个问题只发生在我尝试使用.map() 方法时；当我单独渲染图像时，它工作得很好。

import React,  Component  from "react";

let someData = "hello";

export default class App extends Component 
  constructor(props) 
    super(props);
    this.state = 
      playlists:  name: [], plist_id: [], albumArt: [] 
    ;
  

  getPlaylists(someData) 
    let plistNames = [];
    let plistContents = [];
    let plistArts = [];

    someApi
      .searchPlaylists(someData)
      .then(data => 
        if (data.playlists.items) 
          if (data.playlists.items.length > 0) 
            console.log(data);
            data.playlists.items.forEach(plist => 
              plistNames.push(plist.name);
              plistContents.push(plist.id);
              plistArts.push(plist.images[0].url);

              this.setState(
                playlists: 
                  name: plistNames,
                  plist_id: plistContents,
                  albumArt: plistArts
                
              );
            );
          
        
      )
      .catch(err => 
        console.error(err);
      );
  

  render() 
    //Produces a list of empty images with only the alt attribute showing up
    let _playlists = this.state.playlists.albumArt.map((plist, index) => 
      return <img key=index src=plist.albumArt />
    )
  return (
      <div className="App">
        <button onClick=() => this.getPlaylists(someData)>
          Get Playlist
        </button>

      _playlists

      /*  THIS PRODUCES a similar sympton as the former
          playlists.albumArt.map((plist, index) => 
              <img key=index  src=plist.albumArt />
              )
           */

      /*  THIS IMAGE RENDERS THE FIRST ELEMENT FROM THE ARRAY AND WORKS FINE
            <img src=playlists.albumArt[0]/> */

      </div>
    );
  

如何解决这样的问题？感谢您的时间和帮助。

【问题讨论】：

为自己的幼稚道歉，但 <img key=index src=plist.albumArt alt="Album Art"/> 已经在图像标签中还不够吗？

【参考方案1】：

您目前正在使用以下方法映射您的专辑封面数组：

let _playlists = this.state.playlists.albumArt.map((plist, index) => 
  return <img key=index src=plist.albumArt />
)

问题是您将<img /> 标签的src 设置为plist.albumArt，而实际上“plist”的值是您想要的网址：

let _playlists = this.state.playlists.albumArt.map((plist, index) => 
  return <img key=index src=plist />
)

正如其他人所提到的，也不建议在循环期间设置状态。而是循环/映射数据并将其存储在局部变量中，您可以使用该变量调用 setState 一次。

【讨论】：

啊哈哈哈哈该死！多么菜鸟的错误啊！感谢您指出并成功了！！！我不敢相信这就是它的全部。干杯皮内达！

@madLad 完全不用担心，很高兴我能提供帮助。问题：为什么不将播放列表存储为播放列表对象数组，而不是将每个字段存储为单独的数组？

看到每个字段都包含独特的内容，我认为这是最好的方法。是的，我会这样做的，麦克斯韦的建议肯定让我对如何解决它有所了解。再次感谢您的帮助！

【参考方案2】：

条件内联语句呢？这样它收到信息后会渲染吗？

    this.state.playlist.name ?  
    //have your code here to display
    :
    <LoadingSpinner />

【讨论】：

感谢您的帮助，我喜欢加载微调器的想法，但这给我带来了与我分别使用的方法相似的症状，即生成一个空的“未定义”图像列表等......这意味着考虑到它没有加载微调器，正在接收信息？

【参考方案3】：

我相信您的两种情况之间的区别在于，在“工作”的情况下，您没有 alt 道具。

如果您希望图像在加载过程中清晰地显示，您必须减少一些角落。要么使用为您逐步处理图像加载的模块，或者，如果您不关心可访问性，请将 alt 标记设为空并为图像提供默认背景颜色（如果您愿意，可以在加载后设置 alt 标记）。

【参考方案4】：

我不能肯定地说，因为我需要查看返回的数据的结构，但我相当有信心您不希望在 forEach() 循环中设置状态一堆时间。

相反，您可能希望映射数据结果并将其转换为一些有用的对象数组，然后再将其添加到状态，以便您可以在 render 中映射它（看起来不错）并访问内容可以预见。

话虽如此，我希望您在searchPlaylists 调用之后的.then() 块看起来更像：

const playlistsWrangled =  data.playlists.items.map(plist => ( 
  name: plist.name, 
  plist_id: plist.id, 
  albumArt: plist.images[0].url 
));

this.setState( playlists: wrangledPlaylists );

【讨论】：

可爱的小费麦克斯韦！我一定会记下它并亲自试一试！