如何正确显示API中的数据？

Question

大家好！我正在处理一个从API加载数据并随后显示在页面上的赋值。但是，我在页面上显示数据时遇到了问题，特别是在单击"title“之后。这些是赋值要求：

成功标准功能:从https://jsonplaceholder.typicode.com/albums加载专辑并显示在页面上。-The页面显示相册中的标题属性

-When一个相册的标题被点击，相册的照片是从https://jsonplaceholder.typicode.com/albums/${albumId}/photos获取的。

-The页面显示标题，并在单击相册后显示多达10张相册照片的缩略图。

具体说明和有用的提示

-The专辑已经在App.js中获得。编写代码以在App.js中显示相册，并以AlbumDetail.js格式显示相册详细信息。

-The相册应显示标题，每个相册应显示照片标题

-Each相册最多应该显示10张照片，但不应该更多地显示相册的照片，只有在点击相册的标题之后才能显示。每个照片的标签的alt属性应该设置为照片的标题。所有信息都可以显示在同一个页面上。

，到目前为止，这就是我所拥有的：

//App.js//

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">
    <AlbumDetail albums={albums} />
      </div>
  );
}

export default App;

//AlbumDetail.js//

import React, {useState} from "react";

export default function AlbumDetail({ albums }) {
  const [clicked, setClicked] = useState(false);
  const [photos, setPhotos] = useState([]);
  
  const fetchPhotos = (albumId) => { fetch(`https://jsonplaceholder.typicode.com/albums/${albumId}/photos`)
    .then((response) => response.json())
    .then(setPhotos)
    .catch((error) => {
    console.log(error);
  });                                
  };
  
  const albumsList = photos.map((album, index) => (
  <div key = {index}>
      <h2>{album.title}</h2>
      <p
        onClick ={() => {
          setClicked(true);
          fetchPhotos(album.id);
        }}
        >
      </p>
      </div>
  ));
  
  const postPhotos = (
  <div>
      {photos.map((photos, index) => (
      <p key={index}>{`Photo ${index + 1}: ${photo.}`}</p>
      ))}
 </div> 
  );
  
  return (
  <div className="container">
      <div className = "albums">{albumsList}</div>
      <div className="photos">
        <h2> {clicked ? "title for selected album" : "Click the photo of the album"} </h2>
        {clicked && postPhotos}
      </div>
      </div>
  );
}

感谢您抽出时间阅读这篇文章，我将非常感谢您的任何帮助！

Answer 1

看上去有几个关键问题。

One

const albumsList = photos.map应该是const albumsList = albums.map。

2

const postPhotos = (
  <div>
    {photos.map((photos, index) => {
      <p key={index}>
        {`Photo ${index + 1}: ${photo.}`}
      </p>
    })}
  </div> 
);

photos.map((photos.

1. 应该是photos.map((photo而不是photos.map((photo

，

1. ，我假设您也想在这里添加图像。所以：

{photos.map((照片，索引) => (照片{索引+ 1} ))}

下面是一个有用的例子。它可能不会回答你所有的问题，但至少有一些图片正在显示。

​

const { useEffect, useState } = React;

function App() {
  const [albums, setAlbums] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/albums?userId=1")
      .then((response) => response.json())
      .then((data) => {
        setAlbums(data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div className="App">
      <AlbumDetail albums={albums} />
    </div>
  );

}

function AlbumDetail({ albums }) {

  const [clicked, setClicked] = useState(false);
  const [photos, setPhotos] = useState([]);
  
  const fetchPhotos = (albumId) => {
    fetch(`https://jsonplaceholder.typicode.com/albums/${albumId}/photos`)
      .then((response) => response.json())
      .then((data) => {
        setPhotos(data);
      })
      .catch((error) => {
        console.log(error);
      });                                
  };
  
  const albumsList = albums.map((album, index) => (
    <div key = {index}>
      <h4>{album.title}</h4>
      <p
        className="link"
        onClick={() => {
          setClicked(true);
          fetchPhotos(album.id);
        }}
      >Get photos
      </p>
    </div>
  ));
  
  const postPhotos = (
    <div>
      {photos.map((photo, index) => (
        <figure>
          <figcaption>Photo {index + 1}</figcaption>
          <img src={photo.thumbnailUrl} />
        </figure>
      ))}
   </div> 
  );
  
  return (
    <div className="container">
      <div className = "albums">{albumsList}</div>
      <div className="photos">
        <h2> {clicked ? "title for selected album" : "Click the photo of the album"} </h2>
        {clicked && postPhotos}
      </div>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
);

.link { cursor: pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

​