Question

我有一个React应用程序，其中我正在使用axios将表单数据发送到服务器。

我能够发送数据，并且数据库也已更新。问题是，发送请求后，表单中的数据就好像我正在传递查询参数一样被附加到url上。

以下是具有以下形式的组件

import React from 'react'
import axios from '../../axios'

function HomePage(props) {
    const [name, setName] = React.useState('')
    const [email, setEmail] = React.useState('')
    const [password, setPassword] = React.useState('')

    const handleChange = (event) => {
        switch(event.target.name) {
            case "name":
                setName(event.target.value)
                break
            case "email":
                setEmail(event.target.value)
                break
            case "password":
                setPassword(event.target.value)
                break
            default:
                break
        }
    }

    const validation = () => {
        let isValid = true
        return isValid
    }

    const handleSubmit = () => {
        if(validation()) {
            let data = {
                name: name,
                email: email,
                password: password
            }

            axios.post('/user/create-user', data)
                .then(response => {
                    console.log(response)
                })
                .catch(error => {
                        console.log(error)
                    })
        }
    }

    return (
        <div>
            <form>
                <input 
                    type="text" 
                    required
                    name="name" 
                    value={name} 
                    onChange={handleChange}/>
                <input 
                    type="email" 
                    required
                    name="email" 
                    value={email} 
                    onChange={handleChange}/>
                <input 
                    type="password" 
                    required
                    name="password" 
                    value={password} 
                    onChange={handleChange}/>
                <button 
                    type="submit" 
                    onClick={handleSubmit}>Submit</button>
            </form>
        </div>
    )
}

export default HomePage

点击提交按钮后，我在浏览器中看到url和表单数据。

我还可以在dev tools中看到状态（取消）。

我认为浏览器正在导航到具有查询参数的新url，我不知道为什么。不仅仅是在Chrome中。

控制台以蓝色显示“导航到”，带有带有查询参数的不需要的路由。

任何帮助将不胜感激。

Answer 1

form元素默认为GET作为操作，并且您还没有在提交中使用preventDefault，因此默认情况下，表单会发出get请求。

在表单标签上添加表单属性method="post"，并将e.preventDefault()添加到handleSubmit。

一些参考 Forms in react， Handling events

POST请求后，请求有效负载将转换为查询参数

1 个答案: