当用户点击相关博客时，Reactjs要求他们刷新页面

Question

我有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) ;

感谢

Answer 1

正如我在评论中所写的那样，将slug添加到useEffect的依赖数组中解决了这个问题。

为什么？useEffect钩子中的依赖数组用于在其中一个变量发生更改时重新运行钩子。在您的情况下，更改url会更改slug，因此组件应该加载新数据。

我甚至会从这个数组中删除setData，因为它不会做任何事情，因为useState的setter永远不会改变。

useEffect(() => {
laxiosInstance.get(slug).then((res) => {
setData({ posts: res.data });
});
}, [slug]);