7

I have been having trouble with my delete requests not working in Firefox with only info given is "error Request aborted". All other requests are working fine but on Firefox, the delete request is not working. I tested it on chrome and it works fine.

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

  const Buyer = props => (
    <tr>
      <td>{props.buyer.firstName} {props.buyer.lastName}</td>
      <td>
        <Link to={"/buyeredit/"+props.buyer._id}>edit</Link> | <a href="/buyer" onClick={() => { props.deletebuyer(props.buyer._id) }}>delete</a>
      </td>
    </tr>
  )

  export default class BuyerList extends Component {

    constructor(props) {
      super(props);  
      this.deletebuyer = this.deletebuyer.bind(this);  
      this.state = {buyers: []};
    }

    componentDidMount() {
      axios.get('http://localhost:5000/buyer/')
       .then(response => {
         this.setState({ buyers: response.data });
       })
       .catch((error) => {
          console.log(error);
       })
    }

    deletebuyer(id) {
      axios.delete('http://localhost:5000/buyer/'+id)
        .then(res => console.log(res.data))
        .catch(err => console.log("Oops, there was an error with deleteing please fix this asap, thx only works in chrome for some reason :"+err));  
        this.setState({
        buyers: this.state.buyers.filter(el => el._id !== id)
      });
    }

    buyerList() {
      return this.state.buyers.map(currentbuyer => {
        return <Buyer buyer={currentbuyer} deletebuyer={this.deletebuyer} key={currentbuyer._id}/>;
      })
    }

Edit: I have also tested the request in postman and it works perfectly.

Thierry J.
  • 2,148
  • 16
  • 23
Youssef Zayed
  • 71
  • 1
  • 1
  • 3
  • Youssef, Have you ever tried to test the **Delete** API in postman or by using `curl`? If yes, please attach the screenshot or let me know the result whether it works or not. – Kevin Lee Apr 30 '20 at 11:52
  • I have also tested the request in postman and it works perfectly. – Youssef Zayed Apr 30 '20 at 13:18

2 Answers2

34

I ran into a similar issue recently. Turns out it was due to having a <button type="submit"> that was triggering that axios request. Changing the button to <button type="button"> fixed the issue for me.

Charles Brandt
  • 981
  • 10
  • 13
  • 5
    It happened to me as well, and this answer is correct. And I am wondering why it happened – Agam Adhityo Dec 11 '20 at 08:48
  • 1
    Would like to figure out what causes this issue as well. It looks like you have to specify that the type=button. Leaving it out still resulted in an error – ashkan117 Nov 16 '21 at 01:12
  • A HUGE "THANK YOU!" shout-out to @Charles Brandt for this workaround. I was having a very longish bug hunting session, and after I found Charles answer it turned out that changing "submit" to "button" fixed things also for me. With "submit" Axios would simply just not fire the request. I still have no clue why Axios does this, and how Axios can find out which button triggered the GET call. Even stranger, it worked for months where the button used "submit". Very strange. – Christian Esken Nov 20 '22 at 23:28
  • How do you deal with the issue when the problem is similar to the OP's, who is not using a button but a link with an `onClick` handler? – Kamchatka Dec 14 '22 at 14:18
5

It has something do to with how React deals with the submit handling function.

I've been taught to add this line to very top of the submit handling function:

submitHandler = (e) => {
    e.preventDefault();


    // Rest of your function
}
Clinton Fernandes
  • 51
  • 1
  • 1