next.js 如何在reactjs中从localStorage实时获取，删除，更新数据？

bn31dyow 于 2023-08-04 发布在 React

关注(0)|答案(2)|浏览(188)

所以我想做一个页面，从localStorage呈现数据，我想让它实时，所以如果我想删除一些数据从localStorage删除数据的UI实时删除
这是我的代码，但它不实时，我需要重新加载看看的变化

const [favoritesPkg, setFavoritesPkg] = useState([]);

useEffect(() => {
    let a = JSON.parse(localStorage.getItem("savedPkg"));
    setFavoritesPkg(a);
}, []);

const handleRemoveAll = () => {
    localStorage.removeItem("savedPkg");
};

return (...)

字符串
我也尝试了这个代码，我显示了我所期望的，但有一个错误：最大深度渲染

的数据

const [favoritesPkg, setFavoritesPkg] = useState([]);
useEffect(() => {
    let a = JSON.parse(localStorage.getItem("savedPkg"));
    setFavoritesPkg(a);
}, [favoritesPkg]);

const handleRemoveAll = () => {
    localStorage.removeItem("savedPkg");
}

型
因此，在我的组件中有一个操作按钮，如编辑和删除......我希望如果我从localStorage中的数据中删除单个组件，则会实时消失，因此我不需要刷新页面来查看更改

next.js

来源：https://stackoverflow.com/questions/76744478/how-to-take-delete-update-data-realtime-from-localstorage-in-reactjs

2条答案

按热度按时间

sbdsn5lh1#

为了解决这个问题，你需要更新handleRemoveAll函数。在这个函数中，你只是从本地存储中删除项目。您没有更新状态。请更新函数如下。

const handleRemoveAll = () => {
localStorage.removeItem("savedPkg");
setFavoritesPkg(null);

}

字符串
并将useEffect更新为

useEffect(() => {
    
}, [favoritesPkg]);

型
这肯定会实时更新UI。

赞(0）回复(0）举报 2023-08-04

odopli942#

首先你要明白一件事：React仅在更新有状态变量时重新呈现。
有状态变量是使用useState、useReducer或外部库（如Redux、Jotai、Mobx等）创建的变量。
第二件事是，如果你有一个useEffect，你更新了一个变量，你在依赖数组中寻找这个变量，你将在一个循环中结束。
所以永远不要像你在第二个代码示例中做的那样去做
要实现这个结果，您需要更改代码，在handleRemoveAll函数中添加setFavoritesPkg。
你的代码应该看起来像这样：

const [favoritesPkg, setFavoritesPkg] = useState([]);
useEffect(() => {
/* Notice the addition of a conditional to check for the localStorage item,
if you don't do that, you can end up crashing your application when trying the
JSON.parse() */
    const storedPackages = localStorage.getItem("savedPkg")
    if(storedPackages){
      let a = JSON.parse();
      setFavoritesPkg(a);      
    }
}, []); // removed favoritesPkg from the dependency array so you don't fall into an eternal loop

const handleRemoveAll = () => {
    localStorage.removeItem("savedPkg");
    setFavoritesPkg([]) // reseting favoritesPkg to empty array
}

字符串
如果你想更新屏幕中的一些东西（触发重新渲染）更新状态变量，react更新dom时不会观察到localStorage。

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 如何在reactjs中从localStorage实时获取，删除，更新数据？

2条答案

相关问题

热门标签

最新问答