以下是我的问题：我正在使用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调用的“标准”方式。我在网上搜索了很多，但似乎没有太多的信息。