Stop API request after first iteration

Question

I am making an API request to google books, and whenever I get a response I want to end the api call. Because, i noticed that when i successfully make a request and map the response, it still makes requests and i get a quota exceeded per minutes error.

See my api.js

I am using superagent

import React, { Component } from "react"
import request from 'superagent';
import BookList from './BookList';

class Book extends Component{
    constructor(props){
      super(props);
      this.state = {
        books: [],
      }
    }
     LoadMyBooks = () => {
       request.
      get("https://www.googleapis.com/books/v1/users/101611817084652232916/bookshelves/4/volumes?key=yourKey")
      .query(null)
      .then((data) =>{
        // console.log(data);
        this.setState({books: [...data.body.items]})
        
      })
    }
    
   
   

    render(){
      const mybooks = this.LoadMyBooks();
      return(
        <div>
              <BookList books={this.state.books}/>
              
        </div>
  
  
      );
    }
    

  }

  export default Book

Answer 1

import React, { Component } from "react"
import request from 'superagent';
import BookList from './BookList';

class Book extends Component{
    constructor(props){
      super(props);
      this.state = {
        books: [],
      }
    }
     componentDidMount(){
       request.get("https://www.googleapis.com/books/v1/users/101611817084652232916/bookshelves/4/volumes?key=yourKey")
      .query(null)
      .then((data) =>{
        // console.log(data);
        this.setState({books: [...data.body.items]})
        
      })
    
    }
   
   

    render(){
      
      return(
        <div>
              <BookList books={this.state.books}/>
              
        </div>
  
  
      );
    }
    

  }

  export default Book