点击按钮通过Fetch动态切换API分页获取图片问题求助

你的分页功能失效核心问题是pageNumber用了普通变量而非React状态：每次组件重新渲染时，普通变量pageNumber都会被重置回1，而且修改普通变量不会触发组件更新，导致请求的页码始终不对。另外还需要处理页码不能小于1的边界问题，避免发起无效请求。

以下是修复后的完整代码：

const Home = ()=>{
    // 把页码改为React状态，让React追踪其变化
    const [pageNumber, setPageNumber] = useState(1);
    const [photosData, SetPhotosData] = useState([]);
    const baseUrl = `https://pixabay.com/api/?key=25540812-faf2b76d586c1787d2dd02736`;

    const getImages = async()=>{
        try {
            // 用URLSearchParams构建查询参数，比字符串拼接更稳妥
            const params = new URLSearchParams({
                per_page: 9,
                page: pageNumber
            });
            const response = await fetch(`${baseUrl}&${params}`);
            if (!response.ok) {
                throw new Error(`请求失败，状态码：${response.status}`);
            }
            const responseObj = await response.json();
            SetPhotosData(responseObj.hits);
        } 
        catch (error) {
            console.error('获取图片失败：', error);
        }
    };

    // 页码变化时自动触发请求
    useEffect(()=>{
        getImages();
    }, [pageNumber]);

    const getNextPage = ()=> {
        setPageNumber(prev => prev + 1);
    };

    const getPrevPage =()=>{
        // 确保页码不会小于1，避免无效请求
        setPageNumber(prev => prev > 1 ? prev - 1 : 1);
    };

    return(
        <div>
            <button onClick={getPrevPage}>上一页</button>
            <button onClick={getNextPage}>下一页</button>
            <br/>
            {photosData.map(singlePhotoData=>
                <img 
                    key={singlePhotoData.id}
                    src={singlePhotoData.largeImageURL}
                    alt={singlePhotoData.tags} // 添加alt属性，提升可访问性
                    style={{width: '200px', margin: '10px'}} // 增加样式避免图片拥挤
                />)}
        </div>
    );
};

export default Home;

关键改动说明 #

• 用React状态管理页码：将普通变量替换为useState，修改页码时使用setPageNumber，确保状态变化能触发组件重新渲染，请求时使用最新的页码值。
• 调整useEffect依赖：依赖数组添加pageNumber，只要页码变化就自动发起请求，无需在按钮点击后手动调用getImages。
• 边界处理：点击上一页时判断当前页码是否大于1，避免出现page=0的无效API请求。
• 规范参数构建：使用URLSearchParams构建查询参数，比字符串拼接更易维护，减少语法错误。
• 体验优化：添加图片样式和alt属性，提升页面可读性与可访问性。

内容的提问来源于stack exchange，提问作者Omri Azran