React 钩子'useState()'更新程序函数，在表单提交时具有 axios.post

Question

这是我的问题：我正在使用带有较新的useState钩子的 react hooks 功能组件。useState挂钩返回用于更新该状态的更新程序函数。 更新程序功能是我遇到的问题，这是 React 如何工作的常识。在重新呈现dom之前，状态不会更新。但是我需要通过axios(或fetch(发送表单数据onSubmit。

const App = () => {
const [username, setUsername] = useState('')
const handleSubmit = (e) => {
e.preventDefault()
setUsername(e.target.elements.form1.value)
axios.post('http://localhost:3000/api', { name: username })
}
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" name="form1" placeholder="Enter name:" />
<button type="submit">Submit</button>
</form>
</div >
)
}

在此代码中，当表单提交时，表单标记上带有onSubmit事件，将调用handleSubmit()函数。在这里，setUsername()更新程序函数将更新 sate，axios运行对后端服务器的 post 调用。但是axios.post将始终只发送以前的状态值，因为setUsername()函数在重新呈现dom之前不会完成。因此，进入后端的数据总是落后一步。

正确执行此操作的最佳方法是什么？使用我的表单输入，我真的不需要将它们渲染到dom，我只需要将表单信息传递到后端。我什至不应该将这些数据放在状态中吗？如果是这样，使用大表单的最佳方法是什么？比如说 10 个输入值？

我也看到人们在输入表单中使用 value={some state value} 进行双向绑定;但这使得使用钩子在表单中使用多个输入非常困难。除非我错过了某种神奇的方式。

我从未见过在使用 Hooks 响应中执行axios或获取调用的"标准"方式。我在网上搜索了很多，但似乎没有很多关于它的信息。

Answer 1

状态的更新是异步的(hooks该值只会在下一次渲染中更新(。

但是你已经知道value看起来像什么原因已经在你的范围内了。只需将其传递给axios

const App = () => {
const [username, setUsername] = useState('')
const handleSubmit = (e) => {
e.preventDefault()
const { value } = e.target.elements.form1
setUsername(value)
axios.post('http://localhost:3000/api', { name: value })
}
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" name="form1" placeholder="Enter name:" />
<button type="submit">Submit</button>
</form>
</div >
)
}