反应 axios 错误：请求在 Firefox 中中止删除请求，但在 Chrome 中未中止

Question

我的删除请求在 Firefox 中无法正常工作时遇到问题，仅给出的信息是“错误请求中止”。所有其他请求都正常工作，但在 Firefox 上，删除请求不起作用。我在 chrome 上测试了它，它工作正常。

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

编辑：我还在邮递员中测试了该请求，它运行良好。

Answer 1

我最近遇到了类似的问题。原来这是因为有一个<button type="submit">触发了 axios 请求。更改按钮以<button type="button">解决我的问题。

Answer 2

这与 React 如何处理提交处理函数有关。

我被教导将此行添加到提交处理函数的最顶部：

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


    // Rest of your function
}