使用 sessionStorage 存储元素并在页面刷新时更新状态答案

【问题标题】：Use sessionStorage to store elements and update state when page refresh使用 sessionStorage 存储元素并在页面刷新时更新状态
【发布时间】：2022-07-29 00:31:12
【问题描述】：

我尝试使用 useEffect 挂钩更新状态，但它导致了一些错误。每当进行任何更改时，状态都会更新为 sessionStorage。我尝试在 setElements 中使用 useEffect ，我认为这可能会导致问题。是否有最好的方法来设置和获取 sessionStorage 项目以及更新数组状态。（不使用 redux）。

//This is the initial Element Node which will appear by default at start
let prevElement = [{
id: "0",
type: "input",
data: { label: "Input Node", specificElType: "start" },}]

const DnDFlow = () => {
const [elements, setElements] = useState(prevElement);
...
...
...
//I tried to restore the previous work if stored in sessionStorage
useEffect(() => {
  if(JSON.parse(sessionStorage.getItem("flowchart-elements")) != null && JSON.parse(sessionStorage.getItem("flowchart-elements")) != undefined){
   setElements(JSON.parse(sessionStorage.getItem("flowchart-elements")));
}});
...
...
...
const onNodeDrag = async (event, node) => {
sessionStorage.setItem("flowchart-elements",JSON.stringify(elements));
}

谢谢

【问题讨论】：

标签： react-hooks session-storage react-flow

【解决方案1】：

要让useEffect() 在刷新时运行，它需要包含一个空的依赖数组作为其第二个参数。

useEffect( () => {
    ...
}, []}

【讨论】：