如何在反应中使用 axios 发出 POST 请求？

Posted 2023-03-28

【中文标题】如何在反应中使用 axios 发出 POST 请求？

【英文标题】：How do I make a POST request using axios in react?

【发布时间】：2021-12-25 20:49:40

【问题描述】：

我在使用 axios 发布请求时遇到问题。当我点击Button 时，什么也没有发生。应该发生的是，我在输入字段中输入的数据被提交给 API。但是，当我单击按钮时，不会发生任何重定向或任何事情。我不确定 Button 中的 onClick 函数是否永远不会被触发，或者问题是否在于 axios 的调用，然后是 useNavigate 函数。我尝试了几种不同的方法来使用这些功能，但都没有奏效。这可能是一个语法问题，因为我是 react 的初学者。任何帮助将不胜感激！

完整代码：

import axios from 'axios';
import React,  useState  from 'react';
import  Container, Button  from 'react-bootstrap';
import  useNavigate  from 'react-router-dom';

const AddContact = () => 

    const [first_name, setFirstName] = useState("")
    const [last_name, setLastName] = useState("")
    const [mobile_number, setMobileNumber] = useState("")
    const [home_number, setHomeNumber] = useState("")
    const [work_number, setWorkNumber] = useState("")
    const [email_address, setEmailAddress] = useState("")

    const history = useNavigate();
    const AddContactInfo = async () => 
        let formField = new FormData();
        formField.append('first_name', first_name)
        formField.append('last_name', last_name)
        formField.append('mobile_number', mobile_number)
        formField.append('home_number', home_number)
        formField.append('work_number', work_number)
        formField.append('email_address', email_address)

        await axios.post('http://localhost:8000/api/', 
            data: formField
        ).then(function (response) 
            console.log(response.data);
            history('/',  replace: true );
        )
    

    return (
        <div>
            <h1>Add contact</h1>
            <Container>

                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your First Name"
                        first_name="first_name"
                        value=first_name
                        onChange=(e) => setFirstName(e.target.value) />
                </div>


                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your Last Name"
                        last_name="last_name"
                        value=last_name
                        onChange=(e) => setLastName(e.target.value) />
                </div>

                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your Mobile Number"
                        mobile_number="mobile_number"
                        value=mobile_number
                        onChange=(e) => setMobileNumber(e.target.value) /></div>

                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your Home Number"
                        home_number="home_number"
                        value=home_number
                        onChange=(e) => setHomeNumber(e.target.value) /></div>

                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your Work Number"
                        work_number="work_number"
                        value=work_number
                        onChange=(e) => setWorkNumber(e.target.value) /></div>


                <div className="form-group">
                    <input type="text"
                        className="form-control form-control-lg"
                        placeholder="Enter Your Email Address"
                        email_address="email_address"
                        value=email_address
                        onChange=(e) => setEmailAddress(e.target.value) /></div>


                <Button onClick=() =>  AddContactInfo(); >
                    Add Contact
                </Button>

            </Container>

        </div >
    );

;

export default AddContact;

【问题讨论】：

控制台有错误吗？ console.log 在success里面打印什么？

【参考方案1】：

试试这个：

<Button onClick=AddContactInfo>
  Add Contact
</Button>

    

import axios from 'axios';                
    const url = 'http://localhost:8000/api/';
            
            axios.post(url , formField)
                .then(response => 

                     console.log(response.data);
             history('/',  replace: true );

                )
                .catch((response) => 
                    console.log(response);
                );

【参考方案2】：

尝试以这种方式调用函数:)

<Button onClick=AddContactInfo>
  Add Contact
</Button>

【参考方案3】：

首先将AddContactInfo 重命名为addContactInfo，然后：

<Button onClick=addContactInfo>
   Add Contact
</Button>

你应该更正方法addContactInfo如下：

const AddContactInfo = () => 
        let formField = new FormData();
        formField.append('first_name', first_name)
        formField.append('last_name', last_name)
        formField.append('mobile_number', mobile_number)
        formField.append('home_number', home_number)
        formField.append('work_number', work_number)
        formField.append('email_address', email_address)

         axios.post('http://localhost:8000/api/', 
            data: formField
        ).then(function (response) 
            console.log(response.data);
            history('/',  replace: true );
        )