React 的钩子集函数不会在提交时更新数组

Question

export default function App() {
const [arrayOne, setArrayOne] = useState([{name: 'A', age: 10, 
hobbies: [{name: soccer, experience: 12}]}, 
{name: 'B', age: 6, hobbies: []}])
const [newName, setNewName] = useState('')
const [newAge, setNewAge] = useState(0)
function handleSubmit(e) {
e.preventDefault()
const newEntry = {name: newName, age: newAge, hobbies: []}
setArrayOne([newEntry, ...arrayOne])
console.log(arrayOne)
}
return(
<div>
<form onSubmit={e => handleSubmit(e)}>
<input type="text" value={newName} onChange={e => setNewName(e.target.value)} />
<input type="number" value={newAge} onChange={e => setNewAge(e.target.value)} />
<input type="submit />
</form>
</div>
)
}

由于某种原因，在表单上按下提交按钮后，arrayOne不会更新，它总是滞后于一次提交点击。我有没有办法让它立即更新？

Answer 1

你可以试试这个：

let copiedArray = [... arrayOne];
copiedArray.push(newEntry);
setArrayOne(copiedArray);

Answer 2

尝试setArrayOne((curr) => [...curr, newEntry])