如何使用 Fetch 在 React 中从每个专辑中获取具有偶数 ID 的第一张图片？

Question

我有一个返回 5000 张图像的 API。我想在 React 中使用 Fetch 从每个相册中获取第一张带有偶数 ID 的图片。

问题是无法弄清楚如何过滤数据以获取具有偶数 ID 和偶数 ID 专辑的第一张图片的数据。

import React, {useState, useEffect} from 'react';

// Import Materials from Material-ui
import {Grid} from '@material-ui/core';


const Album = () => {
    const [images, setImages] = useState([]);
    const [imagesCount, setImagesCount] = useState(10);
    const api = 'https://jsonplaceholder.typicode.com/photos';

    useEffect(() => {
        fetch(api)
        .then(res => res.json())
        .then(data => {
          const filterData = data.filter(x => x.albumId % 2 === 0);
          for(const url of filterData) {
            if(url.albumId % 2 === 0) {
              // How to get only the first even ablumID url of each even albumID?
            }
          }
          setImages(filterData);
          console.log(filterData);
        })
        .catch(err => console.log(err))

      }, []);

    return (
        <div>
        <Grid container spacing={3} alignItems="center">
          {images.map((album) => (
            <Grid item key={album.id} xs={12} sm={6} md={4}>
              <img className="albumImg" src={album.url} alt={album.title} />
            </Grid>
          ))}
        </Grid>
        </div>
    )
}

export default Album;

Answer 1

至于第一个问题，Array.prototype.filter 不会改变现有数组，而是返回一个包含通过测试的元素的新数组，因此您需要将该新数组存储在一个变量中并使用它来更新您的状态,

const api = "https://jsonplaceholder.typicode.com/photos";

fetch(api)
  .then((res) => res.json())
  .then((data) => {
    const filterData = data.filter((x) => x.albumId % 2 === 0);

    console.log("original", data.length);
    console.log("filtered", filterData.length);
  })
  .catch((err) => console.log(err));

至于您的第二个问题，如果您想创建一个包含唯一 albumIds 的项目的新数组，您可以使用 Array.prototype.reduce 循环所有项目并仅添加那些尚未在 @987654326 中的项目@,

const api = "https://jsonplaceholder.typicode.com/photos";

fetch(api)
  .then((res) => res.json())
  .then((data) => {
    const filterData = data.filter((x) => x.albumId % 2 === 0);
    const uniqueItems = filterData.reduce((accumulator, item) => {
      const isDuplicateItem = accumulator.find(
        (i) => i.albumId === item.albumId
      );
      // append the item if there's no existing
      // item in the array with the same `albumId`
      if (!isDuplicateItem) {
        return [...accumulator, item];
      }

      return accumulator;
    }, []);

    console.log("uniqueItems", uniqueItems.length);
    console.log(uniqueItems[0]);
    console.log(uniqueItems[1]);
  })
  .catch((err) => console.log(err));

如果需要查看更多：

• Array.prototype.reduce - MDN