Prefetch data from mysql and display in react app whenever the url i requested

Question

Im pretty new to reactjs.I want to show a list of buses and their data from Mysql db in the frontend React. I've understood to it with a function by using Axios.get, but the problem is i want to show these whenever the url goes like localhost:3000/admin/viewbuses, so that i used {getbuses()} in the body of react function based component. But that is freezing the browser and im pissed off. Is there a better way to do this?

Like run the function only when changes are made or something.

Viewbuses.js

import Axios  from 'axios'
import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import './Viewbuses.css'
export default function Aaddbus() {

  const [buses, setbuses] = useState([])

  const getbuses=()=>{
    Axios.get('http://localhost:3001/showbuses').then((response)=>{
        // console.log(response);
        setbuses(response.data)
    })
    
  }
  return (
    <>
    


    Buses List
    {/*  */}

    {/* { getbuses()} */}
    




    
      
          
          {
            buses.map((val,id)=>{
              return 
       
            })
          }

        
        
          
            Bus Id
            Bus Name
            From City
            To City
            Capacity
            Action
          

              {val.busid}
              {val.busname}
              {val.fromcity}
              {val.tocity}
              {val.capacity}
              
                
                
                 
                
              

              
      
     
      
    


    
  )

}

Prefetch data from mysql and display in react app whenever the url i requested

0 Answers