如何使用 Fetch 在 React 中使用偶数 ID 从每个相册中获取第一张图片？

Question

我有一个 API returns 5000 张图像。我想在 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 不会改变现有数组，而是 returns 一个包含通过测试的元素的新数组，因此您需要将该新数组存储在变量并使用它来更新你的状态，

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 循环遍历所有项目并只添加那些尚未在 accumulator、

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

如何使用 Fetch 在 React 中使用偶数 ID 从每个相册中获取第一张图片？

How can I get the 1st image from each album with an even ID in React using Fetch?

javascript

api

fetch

reactjs

react-functional-component