React 在表单提交时使用 axios.post 挂钩“useState()”更新程序函数

Question

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

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()更新程序函数将更新状态并axios运行对后端服务器的后期调用。但是axios.post将始终只发送先前的状态值，因为该setUsername()函数在dom重新呈现之前不会完成。所以进入后端的数据总是落后一步。

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

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

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

Answer 1

state更新是async（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 >
    )
}