0

我对编程相当陌生，这是我在这里的第一个问题。我正在尝试从 unsplash 中获取图像以创建具有无限随机图像的可滚动页面。我在 setImages([...images, ...res.data]); 上不断收到钩子错误。我不确定我做错了什么。谢谢你。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { UnsplashImage } from './randomImages/UnsplashImage';
import InfiniteScroll from 'react-infinite-scroll-component';


const Landing = () => {
    const [images, setImages] = useState([]);

    useEffect(() => {
      fetchImages();
    }, [])
  
    const fetchImages = (count = 10) => {
      const apiRoot = "https://api.unsplash.com";
  
      axios
      .get(`${apiRoot}/photos/random?{clientid}&count=${count}`)
      .then(res => {
        console.log(res.data);
        setImages([...images, ...res.data]);
      });
  };

    return (
        <div className="Landing">
            <style>{ 'body {background-color: #5e90be'}</style>
            <img id = "x" src= "example_images/logo.png"
                alt=""></img>
            <h5>Welcome to Photodex</h5>
            <div className="image-grid">
              {images.map(image => (
                    <UnsplashImage
                      url={image.urls.regular}
                      key={image.id}
                      alt={image.description}
                    />
              ))}
            </div>
        </div>
    )
}

导出默认登陆；

UnsplashImage.js

import React from 'react';
import styled from 'styled-components';

const Img = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

export const UnsplashImage = ({ url, key }) => {
  return (
    <Img key={key} src={url} alt="" />
  )
}

谢谢

4

0 回答 0