以下是我的问题:我正在使用react hooks功能组件和较新的useState
钩子。useState
钩子返回一个用于更新该状态的updater函数。updater函数是我遇到的问题,这是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()
updater函数将更新状态,axios
将对后端服务器运行post调用。但是axios.post
将始终只发送前一个状态值,因为setUsername()
函数在dom
重新呈现之前不会完成。因此,进入后端的数据总是落后一步。
什么是最好的方法来正确地做到这一点?对于我的表单输入,我并不真的需要将它们呈现到dom
,我只需要将表单信息传递到后端。我甚至不应该把这些数据放在国家吗?如果是这样,用大表格做这件事的最好方法是什么?比如说10个输入值?
我还看到人们在输入表单中使用value={some state value}进行双向绑定;但是这使得在使用钩子的形式中使用多于一个的输入非常困难。除非有什么神奇的方法让我错过了。
我只是从来没有见过在React with Hooks中执行axios
或fetch调用的“标准”方式。我在网上搜索了很多,但似乎没有太多的信息。
1条答案
按热度按时间lnvxswe21#
State的更新是异步的(使用
hooks
,值只会在下一次渲染中更新)。但是您已经知道
value
是什么样子了,因为它已经在您的范围内了。就传给axios