React-Firebase：为什么在我的一个组件中无限调用 console.log？

Question

I'm creating a project in React, with a Firebase backend.

I need the details of an authenticated user passed from the GigRegister component to the UniqueVenueListing component, and am passing it via props.

In UniqueVenueListing , I'm making a GET request, then filtering through the data looking for a match. Strange thing is this - the console.log I have within the axios call is being called infinitely. Any ideas as to why? Is this some sort of error I've made with asynchronous functions?

This is UniqueVenueListing component where the infinite console.log is occuring:

import React, {useState} from 'react'
import axios from 'axios'
import { auth } from 'firebase/app'

const UniqueVenueListing = (props) => {

    const [gig, setGig] = useState({})
    const authUserId = props.userDetails.uid

    axios
    .get("https://us-central1-gig-fort.cloudfunctions.net/api/getGigListings")
    .then(res => {
        console.log(authUserId)    // **this** is the problematic console.log
        const filteredGigs = res.data
        .filter(gig => {
            gig.user = authUserId
        })
        setGig({
            gig: filteredGigs
        })
        console.log(gig)
    })

    return(
        <div>
        
           {/* {
               gig.map(gigItem => {
                    return gigItem
               })
           } */}
        </div>
    )
}

export default UniqueVenueListing

and this is the GigRegister component that passes props to UniqueVenueListing :

import React from "react";
    import Header from "./Header";
    import TextField from "@material-ui/core/TextField";
    import Button from "@material-ui/core/Button";
    import axios from "axios";
    import * as firebase from 'firebase'
    import { auth } from 'firebase/app'
    import {Link} from 'react-router-dom'
    import UniqueVenueListing from './UniqueVenueListing'


    class GigRegister extends React.Component {
      constructor() {
        super();
        this.state = {
          name: "",
          venue: "",
          time: "",
          date: "",
          genre: "",
          tickets: "",
          price: "",
          userDetails:{}
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this)
      }

      handleChange(e) {
        this.setState({
          [e.target.name]: e.target.value,
        });
      }
    
      handleClick(){
        console.log('handle click reached')
        auth().signOut().then(() => {
          console.log('Successfully signed out')
        })
        .catch(err => {
          console.log(err)
        })
      }

      componentDidMount(){
        this.authListener()
      }

      authListener(){
        auth().onAuthStateChanged((user)=>{
          if(user){
            console.log(`user signed in as ${user.email}`)
            this.setState({
              userDetails: user
            })
          } else {
            this.setState({
              userDetails: null
            })
            console.log('no user signed in')
          }
        })
      }
  

      handleSubmit(e) {
        let user = auth().currentUser.uid
        console.log(`this is the userid: ${user}`)
        const gigData = {
          name: this.state.name,
          venue: this.state.venue,
          time: this.state.time,
          date: this.state.date,
          genre: this.state.genre,
          tickets: this.state.tickets,
          price: this.state.price,
          user:user
        };
        
        
        auth().currentUser.getIdToken().then(function(token) {
          axios("http://localhost:5000/gig-fort/us-central1/api/createGigListing", {
            method: "POST",
            headers: {
              "content-type": "application/json",
              "Authorization": "Bearer "+token,
            },
            data: gigData,
          })
      })
          .then((res) => {
            console.log(res);
            this.props.history.push('/Homepage')
          })
          .catch((err) => {
            console.error(err);
          });
      }
    
      returnUser(){
       
      }
    
      render() {

        return (
          <div className="gig-register">
            <Header />
            <h1 className="header-gigReg">Register a gig</h1>
            {
              this.state.userDetails ?
              <button onClick = {this.handleClick}>Sign out </button>
              :
              null
            }
            {
              this.state.userDetails ?
              <h2>You are signed in as {this.state.userDetails.email}</h2>
              :
              null
            }
            
            <Link to="/Homepage" style={{ textDecoration: "none" }}>
            <h2>Go to gig listings</h2>
            </Link>
            <UniqueVenueListing userDetails = {this.state.userDetails}/>
            <form onSubmit={this.handleSubmit}>
              <TextField
                placeholder="Event name"
                defaultValue="Event name"
                id="name"
                name="name"
                onChange={this.handleChange}
              />
              <TextField
                placeholder="Time"
                defaultValue="Time"
                type="time"
                label="Enter start time"
                id="time"
                name="time"
                InputLabelProps={{
                  shrink: true,
                }}
                inputProps={{
                  step: 300, // 5 min
                }}
                onChange={this.handleChange}
              />
              <TextField
                id="date"
                label="Select date"
                type="date"
                defaultValue="2017-05-24"
                InputLabelProps={{
                  shrink: true,
                }}
                onChange={(e) => {
                  this.setState({ date: e.target.value });
                }}
              />
              <TextField
                placeholder="Genre"
                defaultValue="Genre"
                id="genre"
                name="genre"
                onChange={this.handleChange}
              />
              <TextField
                placeholder="Tickets"
                defaultValue="Tickets"
                id="tickets"
                name="tickets"
                onChange={this.handleChange}
              />
              <TextField
                placeholder="Price"
                defaultValue="Price"
                id="price"
                name="price"
                onChange={this.handleChange}
              />
              <Button type="submit">Submit</Button>
            </form>
          </div>
        );
      }
    }
    
    export default GigRegister

Answer 1

Yes, Every time your function is being re-rendered, it calls that axios request too, hence infinite requesting, hence infinite console.logging.

Which should be the fix? This one:

useEffect(() => {
  axios
.get("https://us-central1-gig-fort.cloudfunctions.net/api/getGigListings")
.then(res => {
    console.log(authUserId)    // **this** is the problematic console.log
    const filteredGigs = res.data
    .filter(gig => {
        gig.user = authUserId
    })
    setGig({
        gig: filteredGigs
    })
    console.log(gig)
})
}, [])

That way, the useEffect hook acts as the componentDidMount() function in class-based components, it only gets called when the component first mounts.