React hooks 'useState()' updater function 和 axios.post 提交表单

Question

这是我的问题：我正在使用带有更新的useState钩子的反应钩子功能组件。 useState挂钩返回一个更新程序 function 用于更新 state。 更新程序 function 是我遇到的问题，这是 React 如何工作的常识。 在dom重新渲染之前，state 不会更新。 但我需要axios onSubmit或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() function。 这里setUsername()更新程序 function 将更新状态， axios运行对后端服务器的 post 调用。 但是axios.post将始终只发送以前的 state 值，因为setUsername() function 在重新渲染dom之前不会完成。 所以进入后端的数据总是落后一步。

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

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

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

Answer 1

state更新是async的（带有hooks的值只会在下一次渲染中更新）。

但是您已经知道 scope 内部的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 >
    )
}