用Reactjs提交formData不起作用

编程问答 2022-08-12

问题描述

我试图使用formData（）来使用Reactjs和Hooks提交登录表单，但是它不起作用。 从formData组件返回的值似乎是正确的。我已经尝试过使用Axios和Fetch进行操作，但都无法正常工作。 我还尝试了各种方法来填充formData元素，即使使用固定字符串也是如此，但是它们都不起作用。

我确定自己犯了一些天真的错误，但是我找不到。 你们中的一些可以帮我吗？

谢谢

import React,{useState} from 'react'
import axios from 'axios'

function useLoginForm() {
    const [field,setField] = useState({email: '',password: ''})

    const changeHandler = (event) => {
        setField({...field,[event.target.name]: event.target.value})
    }
    const onBlurHandler = (event) => {
        setField({...field,[event.target.name]: event.target.value});
    }
    const fileHandler = (event) => {
        console.log(event.target.files[0])
    }
    const submitHandler = async (event) => {
        event.preventDefault();

        for(let [name,value] of loginFormData) {
            console.log(`KEY: ${name} VALUE = ${value}`);// Logging outcome details
          }

        const url = 'https://my_url/post'
        }

        console.log(`Submit --> ${field.email} - Password ${field.password}`);

        try{
            const response = await axios.post(url,loginFormData,{
                headers: {
                    "Content-type": "multipart/form-data" /* ; boundary=${loginFormData._boundary}*/
                },}
            )
            console.log(response.data)
        }catch(error){
            console.log(error)
        }
      
    }
    return (
        <div>
            <p>{field.email} - {field.password}</p>
            <form id="loginForm" name="loginForm" onSubmit={submitHandler}>
                <label htmlFor="email">email</label>
                <input type="text" name="email" id="email" onChange={changeHandler} /* onBlur={onBlurHandler} */></input>
                <label htmlFor="password">Password</label>
                <input type="password" name="password" onChange={changeHandler} /* onBlur={onBlurHandler} */></input>
                <input type="submit" value="Login" />
            </form>
        </div>
    )
}

export default useLoginForm

Results:

KEY: email VALUE = xyz_xyz@VBM.com      useLoginForm.js:47
KEY: password VALUE = Xxxxxx            useLoginForm.js:47
Submit --> xyz_xyz@VBM.com - Password Xxxxxx    useLoginForm.js:57

XHRPOSThttps://my_url/post
[HTTP/1.1 404 Not Found 6681ms]

    1
    -----------------------------345147470230284216993885766804
    2
    Content-disposition: form-data; name="email"
    3
    4

    xyz_xyz@VBM.com

    5
    -----------------------------345147470230284216993885766804
    6
    Content-disposition: form-data; name="password"
    7
    8

    Xxxxxx

    9
    -----------------------------345147470230284216993885766804--
    10

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

formsmultipartform-datareactjsreactjs