如何在react hooks动态路由中获取数据

Question

我正在写一个简单的博客集。我有最新的react路由器和react redux。我店里有所有的博客。当我导航到单个博客页面时，它在第一时间运行良好，但当我刷新浏览器或直接在地址栏中输入动态url时，组件会丢失数据。我应该使用哪种钩子来获取数据？我在我的SingleBlog中只有这个来获取数据：

const id = useParams().id
const blog = useSelector(state => state.blogs.find(b => b.id === id))

Answer 1

刷新浏览器时，整个应用程序会重新启动，其中包括保存数据的状态。

如果您想在浏览器刷新后仍保留数据，则应将数据保存在localStorage中，并修改代码，使其从保存在localStorage中的数据中获得状态。

如何做到这一点：
当您获取数据时

...
// Where data is the variable that holds your fetched data
localStorage.setItem('data_array', JSON.stringify(data));

在博客减速器中

...
// Instead of having the initial state as empty array `[]`, you make it equal
// to whichever data is stored in the localStorage. Because if the localStorage
// have no data, it will still return an empty array `[]`
const initialState = JSON.parse(localStorage.getItem('data_array'));
export function blogReducer(state = initialState, action) {
switch (action.type)
...
}

在博客页面

...
// You keep blog const as it is since we took care of the localStorage in
// the reducer
const blog = useSelector(state => state.blogs.find(b => b.id === id))
...

---

快速提示：
您不应该依靠刷新浏览器来获取新的博客文章/数据。然而，您可以使用setInterval()在每x时间发送一个获取请求，以查看是否有任何新的帖子/数据，或者您可以在应用程序中添加一个刷新按钮，触发获取任何新数据的请求