为什么在组件安装之前Axios会继续发送请求？

Question

I have an app with React front and Spring backend. I use Axios to fetch from the back. I have 2 class components with tables and I can access them via a menu component (in componentDidMount and componentDidUpdate only). I use all the possible precautions against infinite loops (loaded state and isMounted with a custom name). It works in the first component which I access after logging in. However, the second component (which is logically the same as the first, just has another entity to fetch) keeps requesting with axios until i go there (i see it in the network tab of my browser). Why can it be? it is definitely not mounted and console.logs don't work from there but while I'm on first it keeps requesting on and on (and it doesn't receive anything I guess, it is 0 bytes at this time)

import React, { Component } from 'react'
import {Link} from 'react-router-dom';
import axios from 'axios'
import "react-table/react-table.css";
import ReactTable from 'react-table';
import {Button, ButtonToolbar} from 'react-bootstrap';
import { LinkContainer } from "react-router-bootstrap";
import AddCalculationsModal from './AddCalculationsModal';
import UpdateCalculationsModal from './UpdateCalculationsModal';
import Cluster from './Cluster';
import Select from 'react-select/src/Select';

export default class Calculations extends Component {
  isCMounted = false;
  constructor(props) {
    super(props)

    this.state = {
        items: [],
        selected: null,
        addModalShow: false,
        updateModalShow: false,
        updateId: null,
        buttonOn: false,
        page: 0,
        elements: 0,
        loaded: false
    }
}

  componentDidMount() {
    this.isCMounted = true;
    if(!this.state.loaded){
      this.load();
    }
  };

  componentDidUpdate() {
    if(!this.state.loaded){
      this.load();
    }
  };

  componentWillUnmount(){
    this.isCMounted = false;
  }

  increasePage = () => {
    this.setState({
      page: this.state.page + 1
    })
  }

  decreasePage = () => {
    this.setState({
      page: this.state.page - 1
    })
  }

  load = async () => {
    await axios.get(`calculations?page=${this.state.page}&elements=${this.state.elements}`)
    .then(res => {
      if (this.isCMounted && this.state.items.id === res.data.id){
        this.setState({items: res.data})
      }
    });
    if(this.state.selected != null && this.isCMounted) {
      this.setState({buttonOn: true})
    }
    this.setState({loaded: true})
  }

  setId = (id) => {
    const idValue = this.state.items[id].id;
    if (this.isCMounted)
      this.setState({updateId: idValue});
  }

  deleteRow = (id) => {
    const index = this.state.items.findIndex(item => {
      return item.id === this.state.items[id].id})
      const idValue = this.state.items[id].id

    axios.delete(`calculations/${idValue}`).then(
      res => {
        this.load();
      }
    )

    this.state.items.splice(index, 1)
    this.load();
  }

  render() {
    let addModalClose = () => this.setState({addModalShow: false});
    let updateModalClose = () => this.setState({updateModalShow: false});
    return (
      <div>
        <h3>Calculations</h3>
        <ReactTable
          columns={
            [
              {
                Header: "ID",
                accessor: "id"
              },
              {
                Header: "Name",
                accessor: "name"
              },
              {
                Header: "Creation Date",
                accessor: "dateCreate"
              },
              {
                Header: "Update Date",
                accessor: "dateUpdate"
              },
              {
                Header: "User",
                accessor: "userId"
              }
            ]  
          }
          data={this.state.items}
          filterable
          showPagination={false}
          getTrProps={(state, rowInfo) => {
            if (rowInfo && rowInfo.row) {
              return {
                onClick: (e) => {
                  this.setState({
                    selected: rowInfo.index
                  })
                },
                style: {
                  background: rowInfo.index === this.state.selected ? '#00afec' : 'white',
                  color: rowInfo.index === this.state.selected ? 'white' : 'black'
                }
              }
            }else{
              return {}
            }
          }}
          >
      </ReactTable>
      <ButtonToolbar>
      <Button variant="primary" onClick={() => {
          this.decreasePage();
          this.load();
        }}>PREVIOUS PAGE</Button>
      <Button variant="primary" onClick={() => {
        this.increasePage();
        this.load();
      }}>NEXT PAGE</Button>
      </ButtonToolbar>
      <ButtonToolbar>
        <Button variant="primary" onClick={() => this.setState({addModalShow: true})}>
          Add Calculation
        </Button>
        <Button variant="primary" onClick={() => {
          this.setId(this.state.selected);
          this.setState({updateModalShow: true})}} disabled={this.state.buttonOn ? false : true}>
          Update Calculation
        </Button>
        <Button variant="danger" onClick={() => {
          this.deleteRow(this.state.selected);
        }}>DELETE</Button>

        <Link to={`/calculations/${this.state.items[this.state.selected] && this.state.items[this.state.selected].id}`}>
          <Button variant="warning" disabled={this.state.buttonOn ? false : true}>Cluster</Button>
        </Link>

        <AddCalculationsModal 
          show={this.state.addModalShow}
          onHide={addModalClose}
          calculation={this.state.items[this.state.selected]}
          />

        <UpdateCalculationsModal 
          show={this.state.updateModalShow}
          onHide={updateModalClose}
          calculation={this.state.items[this.state.selected] && this.state.items[this.state.selected].id}
          calcname={this.state.items[this.state.selected] && this.state.items[this.state.selected].name}
          />

      </ButtonToolbar>
      </div>
    )
  }
}

And

import React, { Component } from 'react'
import axios from 'axios'
import "react-table/react-table.css";
import ReactTable from 'react-table';
import {Button, ButtonToolbar} from 'react-bootstrap';
import AuthenticationService from '../service/AuthenticationService';

export default class Calculations extends Component {
  isCMounted = false;
  constructor(props) {
    super(props)

    this.state = {
        items: [],
        selected: null,
        updateId: null,
        loaded: false
    }
}

  componentDidMount() {
    this.isCMounted = true;
    if(!this.state.loaded) {
      this.load();
    }
  };

  componentDidUpdate() {
    if(!this.state.loaded) {
      this.load();
    }
  };

  componentWillUnmount() {
    this.isCMounted = false;
  }

  load = async () => {
    if(this.isCMounted && !this.state.loaded) {
    await axios.get('calculation-types')
    .then(res => {
      console.log(this.isCMounted)
      if (this.isCMounted && this.state.items.id === res.data.id){
      this.setState({items: res.data})
      }
    });
  this.setState({loaded: true})
  }
  }

  setId = (id) => {
    const idValue = this.state.items[id].id;
    if (this.isCMounted)
    this.setState({updateId: idValue});
  }

  render() {
    return (
      <div>
        <h3>Calculation Types</h3>
        <ReactTable
          columns={
            [
              {
                Header: "ID",
                accessor: "idType",
                width: 100,
                minWidth: 100,
                maxWidth: 100          
              },
              {
                Header: "Name",
                accessor: "name"
              }
            ]  
          }
          data={this.state.items}
          filterable
          showPagination={false}
          getTrProps={(state, rowInfo) => {
            if (rowInfo && rowInfo.row) {
              return {
                onClick: (e) => {
                  this.setState({
                    selected: rowInfo.index
                  })
                },
                style: {
                  background: rowInfo.index === this.state.selected ? '#00afec' : 'white',
                  color: rowInfo.index === this.state.selected ? 'white' : 'black'
                }
              }
            }else{
              return {}
            }
          }}
          >
      </ReactTable>
      </div>
    )
  }
}

are my components. Menu is a normal link. after login i appear on the first with menu on top.

Answer 1

Have you tried moving this.setState({loaded: true}) into the axios response callback block? Since you're awaiting the fetch request, I wonder if the this.setState({items: res.data} that you have in the callback block is causing an infinite componentDidUpdate loop that causes load to be repeatedly called without ever having the chance to arrive at the this.setState({loaded: true}) in the final line of load .

load = async () => {
  if(this.isCMounted && !this.state.loaded) {
    await axios.get('calculation-types')
      .then(res => {
        console.log(this.isCMounted)
        if (this.isCMounted && this.state.items.id === res.data.id){
          this.setState({ items: res.data, loaded: true })
        }
      });
  }
}