Связать имя альбома и фотку, которая принадлежит альбому. REACT JS, VK

Question

Есть задание: В первом табе отображается список фотографий и id (под фоткой случайное число от 1 до 500). Также указывается наименование альбома.

Есть два бэка:

список фотографий и id я вывел, а как связать с альбомом не знаю.

    const [dataAlbum, setDataAlbum] = useState(null)
    const [data, setData] = useState(null)
    const [showLoader, setShowLoader] = useState(true);
    const [randomId, setRandomId] = useState('');

    const fetchData = () => new Promise(response => {
        fetch(`https://jsonplaceholder.typicode.com/photos?_start=${data ? data.length : 0}&_limit=10`)
            .then(e => e.json())
            .then(res => {
                setData(e => [...e ?? [], ...res])
                response(true)
            })
            .catch(() => {
                setShowLoader(false)
            })

        fetch(`https://jsonplaceholder.typicode.com/albums?_start=${data ? data.length : 0}&_limit=10`)
            .then(i => i.json())
            .then(result => {
                setDataAlbum(i => [...i ?? [], ...result])
            })
    })

    console.log(dataAlbum)


    useEffect(() => {
        if (data === null)
            fetchData();
    }, [])

    const randomNum = () => {
        const random = Math.floor(Math.random() * 500);
        setRandomId(random);
    }

    useEffect(() => {
        if (fetchData())
            randomNum()
    }, [])

    console.log(randomId)

    return (<Panel id={id}>
        {data !== null ? <InfScroll onReachEnd={fetchData} showLoader={showLoader} loader={<Spinner />}>
            {}
            {data.map((e, i) => <Card key={i} i={e}>
                {<img src={e.url} width={500} alt=""/>}
                <div className="id">
                    <Text>{Math.floor(Math.random() * 500)}</Text>
                </div>
            </Card>)}
        </InfScroll> : ""}
    </Panel>)
}

Answer 1

вот так можно склеит, по идее с одним прогоном по массиву тоже можно, не пытался оптимизировать. Ну и это дело в кастомный хук. ну еще пути в констаны. и так далее.

 export const App = () => {
 const [albumsWithPhotos, setAlbumsWithPhotos] = useState();

 useEffect(() => {
const fetchAlbumsAndPhotos = async () => {
  try {
    const albums = await fetch(
      "https://jsonplaceholder.typicode.com/albums"
    ).then((res) => res.json());
    const photos = await fetch(
      "https://jsonplaceholder.typicode.com/photos"
    ).then((res) => res.json());

    const transformedAlbums = albums.reduce((acc, next) => {
      acc = {
        ...acc,
        [next.id]: {
          ...next,
          photos: [],
        },
      };
      return acc;
    }, {});

    photos.forEach((photo) => {
      transformedAlbums[photo.albumId].photos.push(photo);
    });

    setAlbumsWithPhotos(transformedAlbums)
  } catch (err) {
    console.error(err);
  }
};
fetchAlbumsAndPhotos();
 }, []);
 return <div></div>;
 };

БЛОГ НА HUSL

Связать имя альбома и фотку, которая принадлежит альбому. REACT JS, VK

Ответы (1 шт):