React Component с реакцией-инфинитом-скруткой-компонентом нагрузки дважды на начальном рендеринге ⇐ Javascript

[Anonymous]

Я использую React-infinite-scroll-component в компоненте React, который получает сообщения из моей бэкэнд для конкретной группы. Проблема в том, что когда страница загружается, она дважды показывает одни и те же посты. Я также прокомментировал React.strictMode , а на странице все еще показывают все сообщения дважды.
Я не могу понять, что вызывает дублирование. Вот полный компонент: < /p>
import { useState, useEffect, useContext } from "react";
import { useParams } from "react-router-dom";
import axiosInstance from "../../api/axiosInstance";

import PostForm from "../forms/PostForm";
import { AppContext } from "../../Context/AppContext";
import Post from "../post/Post";
import InfiniteScroll from "react-infinite-scroll-component";

export default function GroupsSinglePage() {
const { group_id } = useParams();
const { user } = useContext(AppContext);

const [groupData, setGroupData] = useState(null);
const [posts, setPosts] = useState([]);
const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);
const [loadingGroup, setLoadingGroup] = useState(true);

const fetchGroupData = async () => {
try {
const response = await axiosInstance.get(`/groups/${group_id}`);
setGroupData(response.data.data);
} catch (error) {
console.error("Error fetching group data:", error);
} finally {
setLoadingGroup(false);
}
};

const fetchPosts = async () => {
try {
const response = await axiosInstance.get(
`/posts/group/${group_id}?page=${page}`
);
const newPosts = response.data.data;

setPosts((prev) => [...prev, ...newPosts]);

const isMore =
response.data.meta.current_page < response.data.meta.last_page;
setHasMore(isMore);
} catch (error) {
console.error("Error fetching posts:", error);
}
};

const handleSubmit = async (formData) => {
try {
const response = await axiosInstance.post("/posts", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
// Reset state and refetch fresh posts
setPosts([]);
setPage(1);
setHasMore(true);
fetchPosts();
} catch (error) {
console.error("Error submitting post:", error);
}
};

const loadMorePosts = () => setPage((prev) => prev + 1);

useEffect(() => {
fetchGroupData();
}, [group_id]);

useEffect(() => {
setPosts([]);
setHasMore(true);
setPage(1);
}, [group_id]);

useEffect(() => {
fetchPosts();
}, [page]);

if (loadingGroup || !groupData) {
return Loading...;
}

return (

style={{
backgroundImage: `linear-gradient(to bottom, transparent, #171717), url(${groupData.cover_image[0].url})`,
}}
className="h-[300px] bg-cover bg-center rounded-lg py-6 px-3 flex items-end"
>
{groupData.name}



{posts.length > 0 ? (

{posts.map((post) => (
key={post.id}
id={post.id}
content={post.content}
media={post.media}
author={post.user.full_name}
created_at={post.created_at}
comments={post.comments}
comments_count={post.comments_count}
/>
))}

) : (

No posts found for this group.

)}


);
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... -on-initia