如何在本地存储中将多个 arrays 存储在单个 object 中并检索它？

Question

我有 5 个 arrays，为了减少代码量，我试图将所有 arrays 添加到一个 object 中，并将该 object 推送到本地存储中。 稍后检索 object 并使用属性。 但是当用户 iam 控制台记录 object 时，它将属性值显示为未定义。 我希望当用户第一次进入该站点并且本地存储 object 中没有数据时，应将具有空数组值的 object 推送到本地存储，如下所示：-

{videoData: [],playlistName: [],playlistObj: [],videoIds: [],notesArr: []}

但是，正在推送具有未定义值的 object：-

{videoData: undefined,playlistName: undefined,playlistObj: undefined,videoIds: undefined,notesArr: undefined}

Function 检索数据 =

const getStoredDataFunc = () => {
  let videoData = localStorage.getItem(`storageData`)
  if (videoData) {
    return JSON.parse(localStorage.getItem(`storageData`))
  }
  else {
    return {
      videoData: [],
      playlistName: [],
      playlistObj: [],
      videoIds: [],
      notesArr: []
    }
  }
}

console.log(getStoredDataFunc)  // {}

状态：-

const [videoData, setvideoData] = useState(getStoredDataFunc().videoData);
const [playlistName, setplaylistName] = useState(getStoredDataFunc().playlistName)
const [playlistObj, setplaylistObj] = useState(getStoredDataFunc().playlistObj)
const [videoIds, setvideoIds] = useState(getStoredDataFunc().videoIds)
const [notesArr, setnotesArr] = useState(getStoredDataFunc().notesArr)

添加到本地存储 -

  useEffect(() => {
    let obj = {
      videoData: videoData,
      playlistName: playlistName,
      playlistObj: playlistObj,
      videoIds: videoIds,
      notesArr: notesArr
    }
    
    localStorage.setItem("storageData", JSON.stringify(obj))
  }, [videoData, playlistObj, playlistName, videoIds, notesArr])

Answer 1

也许当你在state中设置这些arrays中的数据时，它会将[]覆盖为undefined。 您能否分享有关如何使用这些设置函数的代码逻辑 - setvideoData 、 setplaylistName等。