当我清除 google chrome 缓存时,react 中的 fetch 功能才有效"/>
当我清除 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)
- 一旦进入
函数,该函数位于 useEffect 中,当fetchAgain
变化时触发。posts
这对你抱怨的事情似乎不太好。在不告诉我们数据应该如何触发重新获取的情况下,我真的帮不了你,但应该在某处使用
setPosts
来触发重新获取(但这没有任何意义,因为它会触发 useEffect 并重置 posts
).
我只能建议你从一开始就清理和重新思考你的代码,追溯它在做什么,这样问题就会毫无疑问地出现在你面前。
更多推荐
当我清除 google chrome 缓存时,react 中的 fetch 功能才有效
发布评论