Javascript 为什么刷新后本地存储会被删除

问题是，您的前useEffect(带有依赖数组[card])在您的useEffect钩子之前被触发，而没有任何依赖array.您可能可以通过颠倒它们的顺序来修复它，但我会做得更彻底，只有在看到您提供的默认[]以外的内容时，才会让具有[card]依赖项数组的变量执行保存.有一种方法可以做到这一点:

// Outside the component
const defaultCard = [];

function YourComponent() {
    const [card, setCard] = useState(defaultCard);

    useEffect(() => {
        const items = JSON.parse(localStorage.getItem("items"));
        if (items) {
            setCard(items);
        }
    }, []);

    useEffect(() => {
        if (card !== defaultCard) { // Note we're checking *object identity* here
            localStorage.setItem("items", JSON.stringify(card));
        }
    }, [card]);
    
    // ...
}

使用对象标识使得代码永远不会保存我们用作默认的specific空数组(但是will存储一个空数组，该空数组是由用户故意移除所有卡片而产生的).

或者，不要依赖效果来保存array.取而代之的是，为setCard人准备一个包装纸:

function YourComponent() {
    const [card, setCardWorker] = useState(defaultCard);

    const setCard = useCallback(
        (card) => {
            localStorage.setItem("items", JSON.stringify(card));
            setCardWorker(card);
        },
        [setCardWorker]
    );

    useEffect(() => {
        const items = JSON.parse(localStorage.getItem("items"));
        if (items) {
            setCard(items);
        }
    }, []);
    
    // ...code using `setCard` to update `card` as things are added and removed...
}

(I've used 100 rather than 101 in these because the vastly common standard is to capitalize the noun after 102 in these things rather than use all lower-case.