Axios not fetching data using Reactjs

Question

I am working with Reactjs/nextjs and i am trying to fetch data using "Axios", In "Api url" data is fetching/showing but in my webpage showing "There are no records yet",Where i am wrong ? Here is my current code

import React from 'react'
import { useEffect, useState } from "react";
import axios from 'axios';


function Displaydata() {
      const [posts,setPosts]=useState([]);

useEffect(()=>
{
    const getdata=async()=>
    {
        const { data: res } = await axios.get(
            "xxxxxxxxxxxxxxxxxxxx/api/Allvideo"
          );
          console.log(res);
          setPosts(res);
    };
})
return(
    <div>
        {posts?.length ? posts.map((product: { id: any; link: any; }) => <p key={product.id}>
        {product.id}-{product.link}</p>) 
            : <h3>There are no records yet</h3>}
            </div>
    )
}

export default Displaydata

@vighnesh153 i am new in reactjs , "By Default" i just want to display data — Torry
– Torry, Commented Feb 1, 2023 at 4:25

Kesavan R · Accepted Answer · 2023-02-01 04:23:58Z

1

We need to pass second argument for useEffect as empty array or array of values. and then getdata function declared but not called. please find the below code.

useEffect(() => { 
  const getdata = async() => {
    const { data: res } = await axios.get("xxxxxxxxxxxxxxxxxxxx/api/Allvideo");
      console.log(res);
      setPosts(res);
   };
   getdata();
 }, []);

hope this helps!!!

answered Feb 1, 2023 at 4:23

Kesavan R

7111 gold badge5 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Axios not fetching data using Reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related