Typescript 使用React处理Websocket数据

我正在使用React和websocket编写一个实时应用程序，有一个问题，我从websocket获取数据，这里没有问题，但是当它滚动时，我写了下面的代码来获取更多代码，它工作了，但这一次它一遍又一遍地呈现相同的数据，即使db中有10个数据.这是什么原因？([... J. prev] struct ，我在字符串中组合了新数据和旧数据，如果我删除它，问题继续不变，如果我删除它，我的意思是只给post变量，这次它不添加旧数据，并完全呈现页面.我用dotnet websocket signalr写背景.

import React, { useEffect, useState, useRef } from "react";
import { PostLayout } from "../Components/PostLayout";
import { Post } from "../Components/Post";
import { Loading } from "../Components/Loading";
import { HubConnectionBuilder, HttpTransportType } from "@microsoft/signalr";

export const Home = () => {
  const [post, setPost] = useState([]);
  const page = useRef(0);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const connection = new HubConnectionBuilder()
      .withUrl("http://localhost:5226/posts", {
        transport: HttpTransportType.WebSockets,
      })
      .build();
    const loader = () => {
      connection.on("ReceivePosts", (post) => {
        setPost((prevPosts) => [...prevPosts, ...post]);
        setLoading(false);
      });

      connection.on("SendPost", (post) => {
        setPost((prev) => [...prev, ...post]);
        setLoading(false);
      });

      connection
        .start()
        .then(() => {
          connection.invoke("GetPosts", page.current, 5).then((res) => {
            console.log(res);
          });
        })
        .catch((err) => console.log("Error: ", err.toString()));
    };
    loader();
    const handleScroll = () => {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight && !loading) {
          page.current += 1;
          connection.invoke("GetPosts", page.current, 3)
              .then((res) => {
                  console.log(res);
                  setLoading(false);
              })
              .catch((err) => {
                  console.log("Error: ", err.toString());
                  setLoading(false);
              });
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [loading]);

  return (
    <>
      <div className={"grid columns-10 justify-center row-auto gap-8 top-5"}>
        <div className={"w-full "}>
          <PostLayout>
            <div className={"w-full flex flex-col gap-8 "}>
              {loading ? (
                <div className="relative top-32">
                  <Loading />
                </div>
              ) : (
                post.map((prop, index) => {
                  return (
                    <Post
                      key={index}
                      author={prop.author}
                      text={prop.content}
                      url={prop.url}
                      image={prop.image}
                    />
                  );
                })
              )}
            </div>
          </PostLayout>
        </div>
      </div>
    </>
  );
};