Javascript 本地存储在页面重新加载时不断重置

我尝试使用本地存储存储和阵列，但当我重新加载时，它会重置阵列。我看过一些类似的问题，并尽我所能从提供的答案中理解，所以我猜问题可能来自我的代码，所以请帮我复习一下。提前谢谢

import React, { useState } from 'react'
import Modal from './Modal'


function Boards() {
    const [boards, setboards] = useState([]);
    const [title, settitle] = useState('');

    localStorage.setItem('boards', JSON.stringify(boards));

    let storedboards = JSON.parse(localStorage.getItem('boards')) || [];

    const handleChange = (e) => {
        settitle(e.target.value)
    }
    const handleSubmit = () => {
        if (title.length === 0) {
            return;
        }
        setboards(prev => (
            [
                ...prev,
                title
            ]
        ))
    }
    return (
        <div>
            <ul id="boards">
                <BoardList boards={boards} />
            </ul>
            <Modal title={title} handleChange={handleChange} handleSubmit={handleSubmit} />
        </div>
    )
}
function BoardList({ boards }) {
    const history = useHistory()
    return (
        <>
            {
                boards.map((board, index) => (
                    <li key={index} onClick={() => { history.push('./workspace') }}>
                        <h3>{board}</h3>
                    </li>
                ))}

        </>
    )
}
export default Boards

import React，{useState}来自“React”
从“./Modal”导入模态
功能板（）{
const[boards，setboards]=useState（[]）；
const[title，settitle]=useState（“”）；
localStorage.setItem（'boards'，JSON.stringify（boards））；
让storedboards=JSON.parse（localStorage.getItem（'boards'））| |[]；
常数handleChange=（e）=>{
settitle（如目标值）
}
常量handleSubmit=（）=>{
如果（title.length==0）{
返回；
}
setboards（上一个=>(
[
…上一页，
标题
]
))
}
返回(


)
}
功能板列表（{boards}）{
const history=useHistory（）
返回(
{
boards.map（（board，index）=>(
{history.push（'./workspace'）}>
{董事会}

))}
)
}
导出默认板

重新加载时会重置阵列，因为：

功能板（）{
//您正在使用空数组创建状态变量
const[boards，setboards]=useState（[]）；
//您正在覆盖本地存储上的“boards”项
localStorage.setItem（'boards'，JSON.stringify（boards））；

尝试一下这样的细微变化：

功能板（）{
//如果为null，请尝试从本地存储加载“boards”，并将空数组设置为var
const storedboards=JSON.parse（localStorage.getItem（“boards”））| |[]；
//使用上述变量创建状态变量
//如果本地存储器中有“boards”，则该值将是恢复的值
//否则，此状态的初始值将是空数组
const[boards，setboards]=使用状态（存储板）；

组件要做的第一件事是使用以下行将localStorage设置为空值：

localStorage.setItem（'boards'，JSON.stringify（boards））

好的，那么有什么更好的方法呢。对不起，我是新手，假设您只想在列表发生更改时编写本地存储，然后将该行代码移动到您的更改处理程序中。当我这样做时，它根本不会更新本地存储，即使不重新加载本地存储，它仍然是一个空的arrayRight-您有两个哦，我明白了，非常感谢。我花了一整天的时间在这上面。对不起，我回答晚了，再次谢谢