Reactjs 正在尝试在React中实现本地存储。它不是跟踪我发送的输入值

我试图在REACT中实现一个本地存储，以便将输入的数据（数字）保存在数据库中。当我在console.log中检查代码时，代码可以工作，但它没有按照我的意愿工作。每次我添加一个值，它都会删除上一个值。这样我就可以读取最后输入的内容了。它没有显示我之前输入的所有内容。我想提到的是，这个组件是按二进制方式呈现的，所以在父组件中，我有四个不同的按钮，我可以在其中键入我想要的数字。提前谢谢

import React, { useState, useEffect } from 'react';

function Stake() {
    const [stakes, setStakes] = useState([]);

    const addStake = (e) => {
        e.preventDefault();
        const newStake = {
            input: e.target.stake.value,
        };
        setStakes([...stakes, newStake]);
    };

    useEffect(() => {
        const json = JSON.stringify(stakes);
        localStorage.setItem("stakes", json);
    }, [stakes]);

    console.log(stakes)
    return (
        <div>
            <form onSubmit={addStake}>
                <input style={{ marginLeft: "40px", width: "50px" }} type="text" name="stake" required />
                {/* <button style={{ marginLeft: "40px" }} type="submit">OK</button> */}
            </form>
        </div>
    );
}

export default Stake;

import React，{useState，useffect}来自“React”；
功能桩（）{
const[stacks，settakes]=useState（[]）；
const addstack=（e）=>{
e、 预防默认值（）；
常量新闻片段={
输入：e.target.stack.value，
};
设置镜头（[…赌注，新闻镜头]）；
};
useffect（（）=>{
const json=json.stringify（木桩）；
setItem（“木桩”，json）；
}，[股权]；
控制台日志（木桩）
返回(
{/*好的*/}
);
}
出口违约股权；

现在，您的组件总是以空数组开始：

useState（[]）

当组件第一次渲染时，需要从locaStorage检索现有值并将其设置为组件的本地状态：

useEffect(() => {
    const stakes= JSON.parse(localStorage.getItem("stakes")) || [];
    setStakes(stakes);
}, []);

---

我得到了一个错误，这不是iterableAh是的，您只需要添加一个安全防护，以防本地存储空间为空，例如

if（）{}

或

|124;[]

现在可以工作了，但不能完全工作。这个组件渲染了4次，所以我得到了4个不同的数据库。如何在一个公共数据库中对所有输入进行分组？非常感谢它创建了一个包含4个对象的数组。这是因为您编写了以下代码：

constnewstake={input:e.target.stake.value，}；设置镜头（[…赌注，新闻镜头]）。如果只需要一个数组，只需执行
const settakes（[…stakes，e.target.stake.value]）