如何正确显示来自 API 的数据？

Question

大家好！我正在处理一项从 API 加载数据并稍后显示在页面上的作业。但是，我无法在页面上显示数据，尤其是在单击“标题”之后。这些是作业要求：

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

中的标题属性

-点击相册标题时，会从https://jsonplaceholder.typicode.com/albums/${albumId}/photos中获取相册中的照片。

-页面显示标题，点击相册后页面最多显示10张相册照片的缩略图

具体说明和有用提示

-专辑已在 App.js 中提取。编写代码以在 App.js 中显示相册，并将相册详细信息放入 AlbumDetail.js。

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

-每个相册最多显示 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

看起来有几个关键问题。

一个

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

两个

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

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

我假设您也想在此处添加图片。所以：

 {photos.map((photo, index) => (
   <figure>
     <figcaption>Photo {index + 1}</figcaption>
     <img src={photo.thumbnailUrl} />
   </figure>
 ))}

这是一个工作示例。它可能无法回答您的所有问题，但至少会显示一些图像。

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>

如何正确显示来自 API 的数据？

How to display data correctly from an API?

javascript

api

reactjs