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

条件内联语句呢？这样，它将在收到信息后呈现？

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

Answer 2

我不能肯定地说，因为我需要查看返回的数据的结构，但是我非常有信心你不要要在{{1}循环一遍。

相反，您可能想要映射数据的结果并将其转换为一些有用的对象数组，然后再将其添加到状态，以便可以在forEach()（看起来不错）中进行映射并访问内容可预测。

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

searchPlaylists

Answer 3

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

如果要在加载过程中清晰显示图像，则必须切掉一些角落。请使用可以逐步为您处理图像加载的模块，或者，如果您不关心可访问性，请使alt标签为空，并为图像提供默认的背景颜色（如果需要，您可以在加载后设置alt标签）。 / p>

Answer 4

您当前正在使用以下方法在专辑封面中进行映射：

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

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

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

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

ReactJS：渲染图像数组

4 个答案: