ReactJS：渲染图像数组

Question

我还是 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} alt="Album Art"/>
    })
  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} alt="Album Art"/>
              })
          } */}

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

      </div>
    );
  }
}

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

Answer 1

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

let _playlists = this.state.playlists.albumArt.map((plist, index) => {
  return <img key={index} src={plist.albumArt} alt="Album Art"/>
})

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

let _playlists = this.state.playlists.albumArt.map((plist, index) => {
  return <img key={index} src={plist} alt="Album Art"/>
})

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

Answer 2

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

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

Answer 3

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

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

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