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

Question

Team any better way to get data from Axios API and then use it 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 on what am doing wrong?

Does this answer your question? React hooks with async fetch — Heartbit
– Heartbit, Commented Jan 25, 2022 at 6:22
Not sure how to fit this in my case, basically I want the output of api in myresponse variable which I can use further. — Sarvesh Agarwal
– Sarvesh Agarwal, Commented Jan 25, 2022 at 6:33
Please read How to Ask, minimal reproducible example and "Why not upload images of code on SO when asking a question?" along with "Discourage screenshots of code and/or errors". Images of text are unwanted. Copy the text and paste it into your question, formatting it appropriately. — the Tin Man
– the Tin Man, Commented Jan 30, 2022 at 19:33

Surjeet Bhadauriya · Accepted Answer · 2022-01-25 06:36:46Z

2

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
   });

answered Jan 25, 2022 at 6:36

Surjeet Bhadauriya

7,2223 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related