Reactjs Localstorage正在重写索引0处以前的存储数据，而不是在索引1处存储新数据。谁能建议我该怎么办？

我想在localstorage中存储用户输入的移动详细信息。此代码存储第一次输入的手机详细信息，但对于第二次输入，详细信息将覆盖以前的信息。以前的数据丢失

const MobileDetails = () => {
    //using hooks o store the data
    const [detail, setDetail] = useState({
        mobileName: '',
        brand: '',
        price: '',
        color: '',
        RAM: '',
        ROM:'',
    });

//save data in localstorage
const handleSubmit = () => {
        let mobileDetails = []
        mobileDetails.push(detail)
        localStorage.setItem('data',JSON.stringify(mobileDetails))
}

//updating detail 
const handleChange = (event) => {
    const {name, value} = event.target;
    setDetail({
        ...detail,
        [name]: value
    })
}


return(
//input section
    <div>
        <h1>Enter Mobile Details</h1>
        <div className='inputContainer'>
            <TextField id="standard-search" name='mobileName' placeholder="Mobile Name" value= 
            {detail.mobileName} onChange={handleChange} type="search"/>
            <TextField id="standard-search" name='brand' placeholder="Brand" value={detail.brand} 
            onChange={handleChange} type="search"/>
            <button name='Submit' className='button' onClick={handleSubmit} >Submit </button>
        </div>
    </div>
)
}

const mobiledeails=（）=>{
//使用钩子来存储数据
const[detail，setDetail]=useState({
mobileName:“”，
品牌：''，
价格：''，
颜色：''，
RAM:“”，
ROM:“”，
});
//在本地存储中保存数据
常量handleSubmit=（）=>{
让mobileDetails=[]
mobileDetails.推送（细节）
localStorage.setItem（'data'，JSON.stringify（mobileDetails））
}
//更新详细信息
常量handleChange=（事件）=>{
常量{name，value}=event.target；
设置细节({
细节
[名称]：值
})
}
返回(
//输入段
输入手机详细信息
提交
)
}

---

如何解决此问题

问题是您在提交每个表单时都将

mobiledeails

设置为空数组。要解决此问题，有两种方法：

首先：使用

useState

hooks在数组中保存移动详细信息。在每次页面刷新时使用这种方式，您将再次丢失数据

Second：（如果刷新时不丢失数据对您很重要，建议使用）

使用

handleSubmit

中的本地存储初始化

mobileDetails

数组。重构代码应该是这样的：

const handleSubmit = () => {
    //Getting data from localStorage
    const savedMobileDetails = localStorage.getItem('data')

    //Check if data is available to parse or seeting empty array
    const mobileDetails = savedMobileDetails ? JSON.parse(savedMobileDetails) : []

    //Saving new data
    localStorage.setItem('data',JSON.stringify([...mobileDetails,detail]))
}