reactjs - 从 Unsplash 抓取数据时 React 的钩子错误
问题描述
我对编程相当陌生,这是我在这里的第一个问题。我正在尝试从 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="" />
)
}
谢谢
解决方案
推荐阅读
- c# - 使用实体框架和批量更新获取错误“无效的列名”
- python - 使用 Python 抓取以在 Wordpress 上发布 (XML-RPC)
- google-apps-script - 使用 Google Apps 脚本在 Google 网站中添加/删除编辑器
- typescript - UnitTest with Jest 抛出错误:无法识别编码:'cesu8' 尝试连接 mysql 数据库
- mysql - 显示表 MYSQL 中可用的最近 3 个月的数据
- c# - 如何在视图中使用模型数据?
- c# - Json.NET 反序列化属性而不反序列化其上方的父对象
- r - 如何在 R 上创建费率
- mobile - 需要在桌面和移动设备中打开 .ics 日历文件
- selenium - bot 检测绕过服务器上的 selenium