Question

我需要从 localStorage 中删除一个项目，因为它已从 CMS 数据中删除。

因此，我需要在我的 cmsData 挂钩中访问 collectionId useEffect() 并为每个集合提供一个新状态。虽然 cmsData 我可以访问 ID，但我不确定我应该如何检查更改并为 useEffect() 挂钩中的每个集合分配一个新状态。

（现在我的代码只是在重新加载时重置整个 localStorage。）

你能给我一个提示吗？

import React = require("react");
import {PropsWithChildren, useEffect, useState} from "react";
import {CollectionId} from "../../DataTypes";
import {ExpandingContext, ExpandingInfo} from "../../Expanding";
import {useCmsData} from "../../api/CmsDataProvider";

function ExpandControllerComponent (props: PropsWithChildren<any>) {
    const [state, setState] = useState(() => getPersistState())
    const cmsData = useCmsData();

    useEffect(() => {
        cleanUpPersistState()
    }, [])

    const expandingInfo: ExpandingInfo = {
        state: state,
        toggleExpand: collectionId => {
           setState((state) => {
               const isExpanded = expandingInfo.state.get(collectionId) ?? true
               state.set(collectionId, !isExpanded)
               const newState = new Map<CollectionId, boolean>(state)
               persistState(newState)
               return newState
           })
        },
    }

    return (
        <ExpandingContext.Provider value={expandingInfo}>
            {props.children}
        </ExpandingContext.Provider>
    )
}

const persistenceKey = "expandingState"

function persistState (state: Map<CollectionId, boolean>) {
    const json = JSON.stringify(Array.from(state.entries()))
    localStorage.setItem(persistenceKey, json)
}

function getPersistState (): Map<CollectionId, boolean> {
    const json = localStorage.getItem(persistenceKey)
    return new Map(JSON.parse(json))
}

function cleanUpPersistState () {
    localStorage.removeItem(persistenceKey);
}

export = ExpandControllerComponent

Answer 1

您可以通过 useEffect 检查 useEffect({},[cmsData]) Hook 中的更改，如果 cmsData 获得一些分配或更新的值，useEffect 将运行。请注意，useEffect 也会在页面加载时运行，并且仅在 cmsData 值更改时运行。此外，您还可以通过 useEffect({}, [cmsData, otherVar, etc]) 侦听其他变量，这样 useEffect 也会侦听这些变量，并在数组中提供的任何值发生更改时运行。

根据 cms 数据更新删除本地存储中的项目

1 个答案: