使用 JSON.stringify 保存到本地存储时，我的值变为空

Question

我正在开发一个网络应用程序，用户单击表格中的一行，它会变成绿色，然后将其保存到本地存储中，以便每次访问网页时都会保存他们单击的行。当我尝试将我的值保存到 React localstorage 时，我遇到了这个奇怪的问题，该值清空了。我必须使用 JSON.stringify 才能将其保存到本地存储。下面是我的代码

var store = JSON.parse(localStorage.getItem("name"));

if (store === null) {
    store = new Set();
} else {
    store = new Set(store);
}

function saveStore() {
    localStorage.setItem("name", JSON.stringify([...store]));
}


const handleRowClicked = row => {
        const updatedData = data.map(item => {
            if (row.uid !== item.uid) {
                return item;
            }
            console.log(item.uid)
            if(store.has(item.uid)) {
                store.delete(item.uid);
            } else {
                store.add(item.uid);
            }

            saveStore();

            return {
                ...item,
                toggleSelected: !item.toggleSelected
            };
        });

        setData(updatedData);
  };

我尝试打印 stringify 方法的值，它总是准确地显示出我想要的结果，但是当我使用开发控制台检查本地存储时，它总是空的。我还打印了 if 情况，因此我知道代码正在执行正确的语句。它应该将其添加到存储中，然后使用 saveStore() 方法，该方法将字符串化存储集并将其保存到本地存储中。有人可以帮助我吗？

Answer 1

不清楚你是如何编写你的反应组件的，但问题似乎出在

1. var 声明将被提升并以 undefined 进行初始化。所以最好使用let。
2. 使用 useEffect 钩子在组件渲染时初始设置存储值，您还可以利用状态变量来存储所选项目

  const [selectedItems, setSelectedItems ] = useState([])
  let store = JSON.parse(localStorage.getItem("name"));
  
  useEffect(() => {
      if (store) {
        setSelectedItems(new Set(store))
      }
  }, [store])

  useEffect(() => {
    if (updatedData) {
      localStorage.setItem("name", JSON.stringify([updatedData.map(item => item.uid)]));
    }
  }, [updatedData])

  const handleRowClicked = row => {
    const updatedData = data.map(item => {
        if (row.uid !== item.uid) {
            return item;
        }

        if(store.has(item.uid)) {
            store.delete(item.uid);
        } else {
            store.add(item.uid);
        }

        return {
            ...item,
            toggleSelected: !item.toggleSelected
        };
    });

    setData(updatedData);
};