React提交表单时为何将TextField值存入query params？

问题原因 #

你的按钮设置为type="submit"且嵌套在<form>标签内，点击时会触发HTML表单的默认GET提交行为，浏览器会自动将表单字段拼接成URL Query参数，这是原生HTML的默认行为，和React无关。你提到用了preventDefault但无效，是因为当前的handleLogin函数没有接收表单提交的事件对象，自然无法阻止默认行为。

另外你的状态初始化存在小问题：useState([])应该改为useState("")，登录名和密码是字符串类型，不是数组。

解决方案（任选其一即可） #

方案1：在点击事件中阻止默认行为 #

修改handleLogin函数，接收事件参数并调用preventDefault()：

const handleLogin = async (e) => {
    e.preventDefault(); // 阻止表单默认提交行为
    const response = await tryLogIn(login, pass);
    alert(response);
    if(response){
        navigate("/main");
    } else {
        alert('bad');
    }
}

方案2：将按钮类型改为button #

直接把按钮的type从submit改成button，避免触发表单默认提交：

<Button
    type="button"
    fullWidth
    variant="contained"
    sx={{ mt: 3, mb: 2 }}
    onClick={handleLogin}
>
    Log in
</Button>

方案3：绑定表单的onSubmit事件（更规范的做法） #

把登录逻辑绑定到<form>的onSubmit事件上，替代按钮的onClick：

// 定义表单提交处理函数
const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await tryLogIn(login, pass);
    alert(response);
    if(response){
        navigate("/main");
    } else {
        alert('bad');
    }
}

// 渲染部分修改form属性
<Box component="form" noValidate sx={{ mt: 1 }} onSubmit={handleSubmit}>
    {/* 保持TextField不变 */}
    <Button
        type="submit"
        fullWidth
        variant="contained"
        sx={{ mt: 3, mb: 2 }}
    >
        Log in
    </Button>
</Box>

内容的提问来源于stack exchange，提问作者ihateapachegroovy