LocalStorage 未使用最新值更新

Question

我是新手，我正在尝试增加一个值并将其存储到本地存储中。 我能够在下面写下以下代码，但是，递增数字的最后一个实例没有更新本地存储值。 比如我按“+1”两次，数字是10，dom更新两次，显示数字12，但是本地存储的值是11，为什么会这样？

import { useState } from 'react'


function About () {

    const localStorageValue = parseInt(localStorage.getItem('value'))
    const [value, setValue] = useState(localStorageValue);

    function remove() {
        setValue((add) => add - 1)
        localStorage.setItem('value', parseInt(value))
    }

    function add() {
        setValue((add) => add + 1)
        localStorage.setItem('value', parseInt(value))
    }


    return (
        <>
            <h1>About page</h1>

            <button onClick={remove}>-1</button>
            {value}
            <button onClick={add}>+1</button>
        </>
    )
}

export default About;

Answer 1

使用刷新按钮，它将反映更改

Answer 2

这里的问题是setState的异步行为，即它会稍微延迟更新状态值，并且不会停止setState的完整执行，它将继续执行下一行代码，即localStorage.setItem() 。

在你的情况下setState是setValue

因此，为了克服这个问题，您可能需要某种回调函数行为来使用useState挂钩来实现这一点，因此您可以使用useEffect进行如下操作：

import { useState, useEffect } from "react";

function About() {
    const localStorageValue = parseInt(localStorage.getItem("value"));
    const [value, setValue] = useState(localStorageValue);

    useEffect(() => {
        localStorage.setItem("value", parseInt(value));
    }, [value]); // only rerun if value changes

    function remove() {
        setValue((add) => add - 1);
    }

    function add() {
        setValue((add) => add + 1);
    }

    return (
        <>
            <h1>About page</h1>

            <button onClick={remove}>-1</button>
            {value}
            <button onClick={add}>+1</button>
        </>
    );
}

export default About;

这将确保它在连续状态更新后每次都运行。

PS。 存储时无需使用parseInt ，因为它将仅存储为字符串。