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

Question

我对 axios post 请求有疑问。当我点击 Button 时，没有任何反应。应该发生的是我在输入字段中输入的数据被提交给 API。但是，当我单击按钮时，没有重定向或发生任何事情。我不确定 Button 中的 onClick 函数是否永远不会被触发，或者问题是否在于调用 axios 然后调用 useNavigate 函数。我尝试了几种不同的方法来使用这些函数，但 none 有效。这可能是一个句法问题，因为我是 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;

Answer 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);
                });

Answer 2

试试这样调用函数:)

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

Answer 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 });
        })
    }

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

How do I make a POST request using axios in react?

javascript

django

post

reactjs

axios