2

每当我向下滚动页面时，无限滚动会重新渲染其中的组件，并且它只工作一次。我的意思是重新渲染组件它不起作用应该是我从第一个到最后一个更改但不添加更多视频缩略图组件。这是我主要部分的代码：

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import moment from "moment";
import InfiniteScroll from "react-infinite-scroll-component";

import VideoThumbnail from "../../components/video-thumbnail/video-thumbnail.component";
import { getPopularVideos } from "../../redux/actions/videos.actions";

import "./trendingpage.styles.css";

const TrendingPage = () => {
  const dispatch = useDispatch();

  const { videos } = useSelector((state) => state.homeVideos);

  const fetchData = () => {
    dispatch(getPopularVideos());
  };

  useEffect(() => {
    dispatch(getPopularVideos());
  }, [dispatch]);

  return (
    <div className="page-container wrap-content">
      <InfiniteScroll
        dataLength={videos.length}
        next={fetchData}
        hasMore={true}
      >
        {videos.map((item) => (
          <VideoThumbnail
            key={item.id}
            image={item.snippet.thumbnails.medium.url}
            time={moment
              .utc(
                moment.duration(item.contentDetails.duration).asSeconds() * 1000
              )
              .format("mm:ss")}
            owner={item.snippet.channelTitle}
            name={item.snippet.title}
            minWidth="230px"
          />
        ))}
      </InfiniteScroll>
    </div>
  );
};

export default TrendingPage;

我想可能是因为 redux 操作，所以我也将它粘贴在这里：

export const getPopularVideos = () => async (dispatch, getState) => {
  try {
    dispatch({
      type: HOME_VIDEOS_REQUEST,
    });

    const { data } = await request.get("/videos", {
      params: {
        part: "snippet, contentDetails, statistics",
        chart: "mostPopular",
        regionCode: "TR",
        maxResults: 20,
        pageToken: getState().homeVideos.nextPageToken,
      },
    });

    dispatch({
      type: HOME_VIDEOS_SUCCESS,
      payload: {
        videos: data.items,
        nextPageToken: data.nextPageToken,
      },
    });
  } catch (error) {
    console.log(error);
    dispatch({
      type: HOME_VIDEOS_FAIL,
      payload: error.message,
    });
  }
};

谢谢：）

4

0 回答 0