如何在 React JS 中从 localStorage 动态加载数据？

Question

我正在尝试动态显示存储在 localstorage 中的数据，这意味着当数据添加到 localstorage 时，它​​也应该同时显示在同一页面上。我有以下代码：

const [peopleInfo, getPeopleInfo] = useState(
        JSON.parse(localStorage.getItem("peopleInfo"))
    );

    const [objects, getObjectsList] = useState(
        JSON.parse(localStorage.getItem("objects"))
    );

    const setPeopleInfo = async () => {
        const people = await JSON.parse(localStorage.getItem("peopleInfo"));
        getPeopleInfo(people);
    };

    const getObjects = async () => {
        const object = await JSON.parse(localStorage.getItem("objects"));
        getObjectsList(object);
    };



    useEffect(() => {
        let isSubscribed = true;

        if (isSubscribed) {
            setPeopleInfo();
            getObjects();
        }

                return () => (isSubscribed = false);

    });

当 useEffect 不包含 getObject() 时：

  useEffect(() => {
        let isSubscribed = true;

        if (isSubscribed) {
            setPeopleInfo();
        }

                return () => (isSubscribed = false);

    });

代码工作正常，每次 localStorage 更改时 peopleInfo 都会更新，但是当我包含 getObjects() 和其他类似函数以获取所有必要数据时，应用程序崩溃而不显示错误。我不知道为什么。当我将 useEffect 与空 [] 一起使用时，除非我刷新页面，否则数据不会在 localStorage 更改时更新（这不是我想要的）。有人可以建议怎么做吗？

Answer 1

根据您的代码 useEffect 调用，每次当您的状态发生变化时，如果您使用 [] 作为依赖项 useEffect 仅调用一次，但我意识到当您在 useEffect() 中调用 getObjects() 函数时，它每次都会更改状态时间让你的状态无限变化

 import React,{useState,useEffect} from "react";
    import "./style.css";
    
    export default function App() {
      const [objects, getObjectsList] = useState([{ name: "object1" }]);
    
      useEffect(() => {
         getObjectsList([{ name: "object1" }])
        console.log("loop executed");
      });
      return <div />;
    }

所以我只是更改了一些代码

  import React, { useState, useEffect} from "react";
    import "./style.css";
    
        export default function App() {
          const [objects, getObjectsList] = useState([{ name: "object1" }]);
          useEffect(() => {
            setInterval(() => {
              const localStorageValue = [{ name: "object2" }]; //JSON.parse(localStorage.getItem("objects"));
              if (JSON.stringify(localStorageValue) !== JSON.stringify(objects)) {
                getObjectsList(localStorageValue);
              }
            }, [1000]);
          }, []);
        
          return <div />;
        }

在此代码中，setInterval 每次检查您的本地存储是否更改它会更新您的状态