当我清除 google chrome 缓存时，react 中的 fetch 功能才有效

我有一个很奇怪的问题，

在我的 React 应用程序中，有 1 个文件与此问题相关，

网站未连接到后端 api(node js)

但是如果你清除 google chrome 缓存，它只工作 1 次！你必须再次清除 cashe 以从数据库中获取所有帖子

在stackoverflow上搜索了一下，这个问题真的有线

谷歌浏览器控制台中没有 cors 政策

请看这 2 个文件，看看是否有无限循环？或者我不知道为什么会这样

这是我的 postlist.js 文件，我从 mongodb 中获取帖子到网站的主页

import { nanoid } from "@reduxjs/toolkit";
import tw from 'twin.macro';
import Advertise from "../../pages/PostPage/components/Advertise";
import Placeholder from "../Placeholder";
import Post from "./components/Post";
import rehypeVideo from "rehype-video";
import { useEffect, useState } from "react";
import LoadingSpinner from "../LoadingSpinner/LoadingSpinner";





// import AutoDarkMode from 'auto-dark-mode';
// const theme = null; // will apply the default one
// // some elemens may got corrupted so double rotate them 
// const doubleRotatedElements = ['img', 'video']; 
// new AutoDarkMode(theme, doubleRotatedElements);
  






// import ArticleSkeleton from './ArticleSkeleton';
const PostsList = ({ filteredPosts,filteredTag, toInvalidate, enableImages = true }) => {
  const advertise = async () => {
    window?.EventBus?.emit("reset-ads");
  };
  useEffect(() => {
    advertise();
  }, []);

  const [posts, setposts] = useState(null);
  const [loading, setisLoading] = useState(false);

  useEffect(() => {
    const fetchAgain = async () => {
      if (posts != null) {
        let skip = posts.length;
        // await fetch(`${process.env.BASE_URL}/posts?limit=4&skip=${skip}`)
        await fetch(`http://127.0.0.1:5000/posts?limit=6&skip=${skip}`)
          .then((res) => res.json())
          .then((result) => setposts([...posts, ...result]));
      }
    };

    const handleScroll = () => {
      const html = document.documentElement;
      const body = document.body;
      const windowheight =
        "innerHeight" in window ? window.innerHeight : html.offsetHeight;

      const docHeight = Math.max(
        body.scrollHeight,
        body.offsetHeight,
        html.clientHeight,
        html.scrollHeight,
        html.offsetHeight
      );

      const windowBottom = windowheight + window.pageYOffset;
      if (windowBottom >= docHeight) {
        console.log("we reached the bottom");
        fetchAgain();
      }
    };

    window.addEventListener("scroll", handleScroll);

    return () => window.removeEventListener("scroll", handleScroll);
  }, [posts]);




  useEffect(() => {
    setTimeout(async () => {
      // const res = await fetch(`${process.env.BASE_URL}/posts?limit=4`)
      const res = await fetch("http://127.0.0.1:5000/posts?limit=1");
      
      const data = await res.json();

      setposts(data);
      console.log(data);
    }, 2000);
  }, []);



  return (
    <Wrapper>
      {
        posts?.length > 0 ? (
          posts.map((post, i) => (
            <>
              <>
                <Post
                filteredPosts={filteredPosts}
                  post={post}
                  isFirstPost={enableImages && i++}
                  filteredTag={filteredTag}
                  key={nanoid()}
                  toInvalidate={toInvalidate}
                />
                <Advertise />
              </>
            </>
          ))
        ) : (
          <>
            <LoadingSpinner />
          </>
        )
        // (

        //   <Placeholder />

        // )
      }
    </Wrapper>
  );
};

// const Wrapper = tw.div`w-full border border-pink-300`;
const Wrapper = tw.div`w-full`;

export default PostsList;

这是另一个我认为可能有问题的文件

import { useEffect, useState } from 'react';
import tw, { styled } from 'twin.macro';
import LoadingSpinner from '../../../common/LoadingSpinner';
// import PostsList from '../../../common/PostsList';
import { useGetPostsQuery } from '../../../core/features/posts/postsApiSlice';
import Postslistxx from '../../Tag/Postlistsxx';
import Posts1 from './Posts1';



import { nanoid } from '@reduxjs/toolkit';
  import Post from '../../../common/PostsList/components/Post';
import Placeholder from '../../../common/Placeholder/Placeholder';

const PostsList = ({ posts, filteredTag, toInvalidate, enableImages = true }) => {
  return (
    <Wrapper>
      {posts?.length > 0 ? (
        posts.map((post, i) => (
          <Post
            post={post}
            isFirstPost={enableImages && i === 0}
            filteredTag={filteredTag}
            key={nanoid()}
            toInvalidate={toInvalidate}
          />
        ))
      ) : (
        <Placeholder />
      )}
    </Wrapper>
  );
};









const Posts = ({ value }) => {
  const { data: posts, isLoading } = useGetPostsQuery(null, {
    refetchOnMountOrArgChange: true,
  });
  const [filteredPosts, setFilteredPosts] = useState([]);

  useEffect(() => {
    setFilteredPosts(posts?.filter(post => post.title.toLowerCase().includes(value.toLowerCase())));
  }, [value, posts]);

  return isLoading ? (
    <LoadingSpinner />
  ) : (
    filteredPosts && <PostsList posts={filteredPosts} enableImages={false} />
  );
};

  const Wrapper = tw.div`bg-blue`;

export default Posts;

首先，您提供的代码中有两个

PostsList

你设置了两次

posts

• Once in the useEffect that is triggered only on mount (empty dependency array)
• 一旦进入

  fetchAgain

  函数，该函数位于 useEffect 中，当

  posts

  变化时触发。

这对你抱怨的事情似乎不太好。在不告诉我们数据应该如何触发重新获取的情况下，我真的帮不了你，但应该在某处使用

setPosts

posts 

我只能建议你从一开始就清理和重新思考你的代码，追溯它在做什么，这样问题就会毫无疑问地出现在你面前。