如何在使用 reactjs 和打字稿的方法提交中保存数组

Question

我对下面的代码有问题：

type Formdata{
title: string
cant: number
description
}
// I replace this code to the another code any[], but not
// resolving the problem
// const [sendData, SetsendData] = React.useState<Formdata[]>([])    
const [sendData, SetsendData] = React.useState<any[]>([]) //MYBE PROBLEM HERE
//
const onSubmit = handleSubmit(({title, cant, description})=>{
let data_send = {
title: title,
cant: cant,
description: description
}
// PROBLEM HERE THE FIRST CLICK
// BUT THE SENCOND CLICK WORKING
SetsendData(prev=>[...prev, data_send]) // MYBE PROBLEM HERE
// first click, display undefined
console.log(sendData)
//
window.localStorage.setItem("formreward", JSON.stringify(sendData))
// in the localStorage save data like this
// 0: {title: "title one", cant:37, description: "description"}
// 1: {title: "title two", cant:37, description: "description2"} 
})
return(
<form onSubmit={onSubmit}>
<input type="text" name="title" />
<input type="number" name="cant" />
<input type="text" name="description" />
<button>save</button>
</form>
)

问题是当第一次点击时，不保存任何内容，而控制台日志，显示未定义，但第二次点击确实右键保存数据，这是一个问题，因为当刷新页面，并尝试保存数据时，删除localStorage中的所有数据。 示例如下：

// FIRST CLICK DOESN'T SAVE ANYTHING
[]
// SECOND CLICK WITHOUT REFRESH PAGE
[0: {title: "title one", cant:37, description: "description"}]
// ANOTHER CLICK WITHOUT REFRESH PAGE
[
0: {title: "title one", cant:37, description: "description"}
1: {title: "title Two", cant:44, description: "description2"}
]
// WORKING WELL
//
// BUT, WHEN THE REFRESH PAGE AND THE FIRST CLICK 
// DELETE ALL DATA SAVED
[]

请你告诉我为什么会这样以及如何解决它，请帮助我。

问候

Answer 1

问题是 react 的更新状态函数是异步的。 鉴于此，当您尝试将 Item 设置为本地存储时，您的sendData尚未更新。 您可能希望使用useEffect来侦听senData状态更改并相应地触发setItem，例如：

useEffect(() => 
window.localStorage.setItem("formreward", JSON.stringify(sendData)),
[sendData])

这样，在 sendData 状态更新时，您的本地存储将正确设置它。

另一种方法是在调用更新状态之前将下一个状态设置为变量：

const onSubmit = handleSubmit(({title, cant, description})=>{
let data_send = {
title: title,
cant: cant,
description: description
}
const nextState = [...sendData, data_send]
SetsendData(nextState)
window.localStorage.setItem("formreward", JSON.stringify(nextState))
})