reactjs - 如何使用带有 React Hooks 的 setState 从 local.storage 设置 JSON 对象

Question

考虑以下 - 我有一个条件检查local storagea JSON object，如果它不存在，则将其设置在本地存储中：

设置正确：

但如果它确实存在，我想从本地存储中获取它并将其设置为我的状态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]);

日志返回：

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

我希望它是：

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

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

Answer 1

看来你只推到状态了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]);

我希望它对你有帮助！