Use output from axios API in one function and pass to another

Sarvesh Agarwal Published at Dev

Sarvesh Agarwal

Hi Team any better way to get data from axios API and then use in the same function as data.

import React, { Component, useState, useMemo } from 'react';
import { useTable } from 'react-table';
import { COLUMNS } from './columns';
import axios from 'axios';


export const BasicTable = () => {
      const [myresponse, setmyresponse] =useState([]);
      axios.get('http://localhost:5001/inventory/cluster/cluster1/servertype/test1')
      .then((response) => {
        const myresponse= response.data;
        setmyresponse(myresponse)
      });

      const columns = useMemo(() => COLUMNS, [])
      const data = useMemo(() => myresponse,[])
      const tableInstance = useTable({
        columns: columns,
        data: data
      })
      
    const { getTableProps,getTableBodyProps, headerGroups,rows,prepareRow } =tableInstance
    
    return(
      <table {...getTableProps()}>
          <thead >
            {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {
                headerGroup.headers.map(column =>(
                  <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                ))}
            </tr>
            ))}
          </thead>

          <tbody {...getTableBodyProps()}>
            {
              rows.map(row => {
                prepareRow(row)
                return (
                  <tr {...row.getRowProps()}>
                    {
                      row.cells.map(cell =>{
                        return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                      })
                    }

                </tr>
                )
              })
            }

          </tbody>
      </table>
    )
};

What's happening right now, is i get data using console.log but the requests keep running indefinitely to my axios API. Any thoughts what am doing wrong?

Surjeet Bhadauriya

Just do this: I have used useEffect so that your API gets called only once after your component did mount.

  useEffect(() => {
     axios
       .get('http://localhost:5001/inventory/cluster/cluster1/servertype/test1')   
       .then((response) => {
            const myresponse= response.data;
            setmyresponse(myresponse)
        });
   }, [])
    
   const columns = useMemo(() => COLUMNS, [])
   const data = useMemo(() => myresponse,[myresponse])
   const tableInstance = useTable({
      columns: columns,
      data: data
   });

Collected from the Internet

Please contact [email protected] to delete if infringement.