React 的 Hook 设置函数不会在提交时更新数组答案

【问题标题】：React's Hook set function won't update array on submitReact 的 Hook 设置函数不会在提交时更新数组
【发布时间】：2021-02-12 12:46:10
【问题描述】：

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 在表单上按下提交后不会更新，它总是滞后于单击提交。无论如何我可以让它立即更新吗？

【问题讨论】：

看起来arrayOne 没有在任何地方使用？
提交后如何检查arrayOne？
您的代码在我看来是正确的。
在表单中添加提交按钮时works fine for me。
嗯，这很奇怪。 Mines 一直落后一位。

标签： reactjs react-hooks

【解决方案1】：

你可以试试这个：

let copiedArray = [... arrayOne];

copiedArray.push(newEntry);

setArrayOne(copiedArray);

【讨论】：

【解决方案2】：

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

【讨论】：