javascript - React hooks 'useState()' updater 函数与表单提交上的 axios.post

Question

这是我的问题:我正在使用带有较新的 useState Hook 的 React Hook 功能组件。 useState 钩子(Hook)返回一个用于更新该状态的更新函数。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} 进行双向绑定(bind)；但这使得使用钩子(Hook)很难在一种形式中使用多个输入。除非我错过了一些神奇的方法。

我只是从未见过执行 axios 或 fetch 调用以与 Hooks react 的“标准”方式。我在网上搜索了很多，但似乎没有很多信息。

Answer 1

State 的更新是异步的(使用 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 >
    )
}