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

【问题标题】：How do I make a POST request using axios in react?如何在反应中使用 axios 发出 POST 请求？
【发布时间】：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里面打印什么？

标签： javascript reactjs django post axios

【解决方案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 });
        })
    }

【讨论】：