Реагирует на функцию обновления «useState ()» с помощью axios.post при отправке формы - PullRequest
Новая
       20

Реагирует на функцию обновления «useState ()» с помощью axios.post при отправке формы

1 голос
/ 20 сентября 2019

Вот моя проблема: я использую функциональные компоненты hooks реагирования с более новым useState hook.Хук 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 входных значений?

Я также видел, как люди использовали значение = {некоторое значение состояния} в форме ввода для двухстороннего связывания;но это делает использование более одного ввода в форме очень сложным с использованием хуков.Если только нет какого-то магического пути, который я пропустил.

Я просто никогда не видел «стандартный» способ выполнения axios или получения вызовов в реакции с крючками.Я много искал в Интернете, но, похоже, информации о ней не так много.

1 Ответ

4 голосов
/ 20 сентября 2019

state update is 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 >
    )
}
...