使用 useSWRInfinite 无限加载后，css 对某些元素不起作用

问题描述

我想使用 useSWRInfinite 进行无限加载。

import React,{ useRef,useState } from 'react';
import { useHistory } from 'react-router-dom';
import * as S from './styles';
import CardList from '../CardList/CardList';
import Card from '../Card/Card';
import * as C from '../../utils/constants';
import { movieInfo,popularResponseType } from '../../types';
import { useRequest } from '../../hooks/useRequest';

const Popular: React.FC = () => {
    const history = useHistory();
    const loadingRef = useRef<HTMLdivelement>(null);
    const { movies,error,isLoadingMore,size,setSize,isReachingEnd,mutate } = useRequest();
    if (error) {
        return <h1>Somthing went wrong</h1>;
    }
    if (!movies) {
        return <h1>Loading...</h1>;
    }
    const onClick = (movie: movieInfo,id: number) => {
        history.push(`/detail/${id}`,{ movie });
    };
    return (
        <S.Container>
            <CardList>
                {movies.map((info: movieInfo,id: number) => (
                    <Card
                        title={info.title}
                        onClick={onClick}
                        id={info.id}
                        key={id}
                        image={`${C.IMAGE_URL_ORIGINAL}${info.backdrop_path}`}
                        movie={info}
                    ></Card>
                ))}
                <div ref={loadingRef}>{movies ? '' : 'loading'}</div>
            </CardList>
            <button onClick={() => setSize(size + 1)}>load more</button>
        </S.Container>
    );
};

export default Popular;

这是使用 useSWRInfinite 从 tmdb 获取电影 API 的代码。 点击加载更多按钮后，使用SWRInfinite获取数据成功。

首次渲染时，卡片组件运行良好。 但是单击加载更多后，组件卡不起作用并且对于每个项目。 所有数据都适用于显示图像和显示标题，但图像大小不合适 并且卡片的动画不起作用。

这是使用 useSWRInfinite 的钩子

import React from 'react';
import { useSWRInfinite } from 'swr';
import { movieInfo,popularResponseType } from '../types';
import { fetcher } from '../utils/request';
import * as C from '../utils/constants';

export const useRequest = () => {
    const { data,mutate } = useSWRInfinite(
        (index) =>
            `${C.API_URL}/movie/popular?api_key=${
                process.env.REACT_APP_API_KEY
            }&language=ko-KR&page=${index + 1}`,fetcher
    );
    const PAGE_SIZE = 20;

    const response: Array<popularResponseType> = data ? [].concat(...data) : [];
    const movies: Array<movieInfo> = response.reduce(
        (acc: Array<movieInfo>,cur: popularResponseType) => acc.concat(...cur.results),[]
    );
    const isLoadingInitialData = !data && !error;
    const isLoadingMore =
        isLoadingInitialData || (size > 0 && data && typeof data[size - 1] === 'undefined');
    const isEmpty = data?.[0]?.length === 0;
    const isReachingEnd = isEmpty || (data && data[data.length - 1]?.length < PAGE_SIZE);

    return { movies,mutate };
};

useRequest.ts

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）