模拟面试编程挑战赛

Question

我必须为模拟面试做一个编程挑战，我卡住了。它很简单，所以有点令人沮丧，但我无法理解它。这些是指令

前端Web开发面试我们有一个网站，从我们的jsonplaceholder网站显示相册。对于这个挑战，我们将使用JSONPlaceholder API显示相册中的图像。您应该从过去的练习中熟悉这个API。

成功的标准功能:相册从https://jsonplaceholder.typicode.com/albums加载并显示在页面上。该页显示来自相册的title属性当单击相册的标题时，将从https://jsonplaceholder.typicode.com/albums/${albumId}/photos获取相册的照片。页面显示标题，并在单击相册后在页面上显示最多10张照片的缩略图具体说明和有用的提示相册已经在App.js中被获取了。编写代码以在App.js中显示专辑，并在AlbumDetail.js中显示专辑详细信息。相册有这样的结构:

{
"userId": 1,
"id": 1,
"title": "quidem molestiae enim"
}

相册应该显示标题每个相册都应该显示照片的标题照片的结构如下:

{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://via.placeholder.com/150/92c952"
}

每个相簿应显示最多10张照片，但不能超过相册的照片应该只在相册的标题被点击后显示。每个照片标签的alt属性应该设置为照片的标题。所有信息都可以显示在同一页

import React, { useEffect, useState } from "react";
import AlbumDetail from "./AlbumDetail";
function App() {
const [albums, setAlbums] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/albums?userId=1")
.then((response) => response.json())
.then(setAlbums)
.catch((error) => {
console.log(error);
});
}, []);
return <div className="App"></div>;
}
export default App;

这是我的起始代码。我已经尝试了几件事来把它做好。我创建了一个click处理程序，并将其设置为图像提供的url，但无法让它做任何事情。任何帮助都会很感激!!

Answer 1

实际上，我不明白最终的输出应该是什么。你能检查一下是不是这个吗?

import React, { useEffect, useState } from "react";
export default function App() {
const [albums, setAlbums] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/albums?userId=1")
.then((response) => response.json())
.then(setAlbums)
.catch((error) => {
console.log(error);
});
}, []);
const handleClick = (id) => {
const album = albums.find((a) => a.id === id);
if (!album?.photos) {
fetch(`https://jsonplaceholder.typicode.com/albums/${id}/photos`)
.then((res) => res.json())
.then((res) => {
album.photos = res.slice(0, 10);
setAlbums((prev) =>
prev.map((a) => {
if (a.id === id) {
return album;
}
return a;
})
);
});
}
};
return (
<div className="App">
<ul>
{albums.map((album) => (
<li key={album.id}>
<span
onClick={() => handleClick(album.id)}
style={{ cursor: "pointer" }}
>
{album.title}
</span>
{album?.photos && (
//move these inside of AlbumDetail component
<div>
{album.photos.map((photo) => (
<img
key={photo.id}
alt={photo.title}
src={photo.thumbnailUrl}
/>
))}
</div>
)}
</li>
))}
</ul>
</div>
);
}

我把所有的事情都放在同一个文件里。

演示https://codesandbox.io/s/wizardly-smoke-ui8ojp?file=/src/App.js: 0 - 1579