标签未在 React 中呈现答案

【问题标题】：Tags not rendering in React标签未在 React 中呈现
【发布时间】：2022-02-11 12:25:15
【问题描述】：

const Albums = ({artist, album, textBarInput}) => {  

    let indexOfTheArtist = takeTheIndexOfTheArtist(artist);   // -1 means not found    |    >= 0   means found and return his position
    let artistAlbums =  bands[indexOfTheArtist].albums
            
    for(let i = 0; i < artistAlbums.length; i+=1){
        return(
             <Record spotifyLink={artistAlbums[i].spotifyLink} imageLink={artistAlbums[i].imageLink} title={artistAlbums[i].title} releaseDate={artistAlbums[i].releaseDate}></Record>
                );
    }
}


const Record = ({spotifyLink, imageLink, title, releaseDate}) => {
    return(
            <a href={spotifyLink} rel='noreferrer' target='_blank'><img src={imageLink} alt={title}></img></a>,
            <p>{title}</p>,
            <p>Release Date: {releaseDate}</p>
        );
}

export default Albums

你好，我正在做一个个人项目，它是一个使用 React 的音乐库。所以我有两个选择选项（一个用于艺术家，一个用于专辑）和一个输入栏，以便用户可以输入他们想要的艺术家并获取该乐队的专辑。我还有一个名为bands的数组，其中每个入口都是一个带有艺术家姓名（艺术家）的字典，还有一个包含该乐队所有专辑的字典，其中包含发布日期、spotify 链接和专辑封面的图像源等数据。正如您在我的相册组件中看到的那样，我从用户那里收到作为道具的输入，但是当我将这些值传递给 Record 组件时，页面上唯一呈现的是发布日期段落。我错过了什么吗？

【问题讨论】：

在return 之前尝试console.log(artistAlbums[i]) for 循环，告诉我们你得到了什么。也许你没有很好地接收到信息，没有它组件无法渲染。
@BaptisteRieber 我按照你的建议做了，我发现它只是传递了相册字典第一个位置的数据，但是图片链接、spotify 链接等都可以。我不明白为什么它没有显示在页面上。
然后尝试用以下代码替换你的 for 循环：for(let album in artistsAlbums){ return( <Record spotifyLink={album .spotifyLink} imageLink={album .imageLink} title={album .title} releaseDate={album .releaseDate}></Record> ); }
现在甚至没有显示发布日期道具。我 console.logged 艺术家专辑和数据都在那里，所以问题可能出在 for 循环上吗？
您可以编辑您的问题并添加我首先建议您使用的 console.log 的屏幕截图吗？

标签： javascript html css reactjs rendering

【解决方案1】：

我很确定问题是数据没有正确更新。尝试添加一个包含您当前艺术家的状态，然后为每条记录传递来自该状态的数据。像这样：

在主组件中添加一个状态： const [currentArtist, setCurrentArtist] = useState({});
在选择合适的艺术家后使用setCurrentArtist，
为每个专辑添加记录，如下所示：

{currentArtist.albums.map((album) =&gt; &lt;Record {...album} /&gt;)}

确保状态中的艺术家对象具有带有道具名称的键。它应该是这样的：

{ spotifyLink: '.../.../', imageLink: '.../.../', title: 'Song Title' ...}

通过这样做，您可以将专辑项目作为道具传播（代码中的示例），而无需逐个传递道具。

【讨论】：

感谢您的帮助，它成功了！我不得不改变一点点，但我得到了我想要的。
np 人，请为答案投票，这样人们就会知道它对你有帮助
我试过了，但不幸的是我没有足够的声誉来做这件事，但 Stack Overflow 已经记录了投票。