如何使用 setState 和 React Hooks 从 local.storage 设置一个 JSON 对象

Question

考虑以下内容——我有一个条件检查 local storage 是否存在 JSON object，如果不存在，则将其设置在本地存储中：

设置正确：

BUT 如果它确实存在，我想从本地存储中获取它并使用 useState:

将其设置为我的状态

export default function Day({ dayInfo }) {


var [dayInfoInChild, setDayInfoInChild] = useState([]);

  useEffect(() => {
    if (dayInfo !== null) {
      var modifiedDayInfo = dayInfo
        .split(' ')
        .map((item) => {
          if (item.indexOf(',')) return item.replace(/,/g, '');
        })
        .join('-');

      if (localStorage.getItem(modifiedDayInfo)) {
        setDayInfoInChild((dayInfoInChild) => [
          ...dayInfoInChild,
          modifiedDayInfo,
        ]);
        console.log('dayInfoInChild', dayInfoInChild);
      } else {
        localStorage.setItem(modifiedDayInfo, JSON.stringify({}));
      }
    }
  }, [dayInfo]);

日志returns:

`dayInfoInChild` ["April-2-2020", "April-3-2020"]

我希望它是：

`dayInfoInChild` ["April-2-2020" : "{}", "April-3-2020": "{}"]`

这是如何实现的？欢迎使用黑魔法...

Answer 1

看来你只push到了状态modifiedDayInfo.

您还必须从本地存储中获取值：

我没测试过，但应该是这样的

 setDayInfoInChild((dayInfoInChild) => [
              ...dayInfoInChild,
              {[modifiedDayInfo],JSON.parse(localStorage.getItem("April-2"))},
            ]);

在代码中：

export default function Day({ dayInfo }) {


var [dayInfoInChild, setDayInfoInChild] = useState([]);

  useEffect(() => {
    if (dayInfo !== null) {
      var modifiedDayInfo = dayInfo
        .split(' ')
        .map((item) => {
          if (item.indexOf(',')) return item.replace(/,/g, '');
        })
        .join('-');

      if (localStorage.getItem(modifiedDayInfo)) {
        setDayInfoInChild((dayInfoInChild) => [
          ...dayInfoInChild,
          {[modifiedDayInfo],JSON.parse(localStorage.getItem("April-2"))
         },
        ]);
        console.log('dayInfoInChild', dayInfoInChild);
      } else {
        localStorage.setItem(modifiedDayInfo, JSON.stringify({}));
      }
    }
  }, [dayInfo]);

希望对您有所帮助！

如何使用 setState 和 React Hooks 从 local.storage 设置一个 JSON 对象

How to set a JSON object from local.storage using setState with React Hooks

local-storage

reactjs

react-hooks

use-state