我有React页面(BlogContent和RelatedBlog(,
当用户查看博客内容时,他可以在下面看到作者的更多博客。当用户点击他想阅读的文章时,Url上的slug会发生变化,但在用户刷新页面之前,内容不会发生变化,因此用户每次想查看作者的所有相关博客时都必须刷新页面。
我认为博客页面每次都需要刷新的原因是因为useEffect((,但我不知道修复的诀窍是什么
这是我的代码页面BlogContent:
export const BlogContent = () => {
const { slug } = useParams();
const [data, setData] = useState({ posts: [] });
useEffect(() => {
axiosInstance.get(slug).then((res) => {
setData({ posts: res.data });
});
}, [setData]);
let AuthorBlog = data.posts.author
};
这里是RelatedBlog
export const RelatedBlog = (props) => {
const { AuthorBlog } = props;
const [appState, setAppState] = useState([]);
useEffect(() => {
axiosInstance.get("/").then((res) => {
const allBlogs = res.data;
setAppState(allBlogs);
});
}, [setAppState]);
const filterAuthor = appState.filter((item) => item.author === AuthorBlog) ;
感谢
正如我在评论中所写的那样,将slug
添加到useEffect
的依赖数组中解决了这个问题。
为什么?useEffect
钩子中的依赖数组用于在其中一个变量发生更改时重新运行钩子。在您的情况下,更改url会更改slug,因此组件应该加载新数据。
我甚至会从这个数组中删除setData
,因为它不会做任何事情,因为useState
的setter永远不会改变。
useEffect(() => {
laxiosInstance.get(slug).then((res) => {
setData({ posts: res.data });
});
}, [slug]);