I'm new working with apis, I already made a post but I make a new one to clarify my problem.
I'm trying to get posts from dummyapi, here is my code :
import React from 'react'
import axios from 'axios'
import { useQuery } from 'react-query';
export default function Home() {
function fetcher() {
return axios.get('https://dummyapi.io/data/v1/post', {
headers : {
"app-id" : "#####"(i have one dont worry)
}
});
}
const {isLoading, data} = useQuery('getPosts',() => fetcher())
// console.log(data)
if(isLoading){
return (<p>IsLoading...</p>)
}
return (
<div >
{Object.keys(data.data).map((e) => <p key={e}>{e.id}</p>)}
</div>
)
}With this code, i can get the datas, but it don't want to display the ids that are in the return, and when i change something it tells me that data is undefined, to help you to help me here is the api response :
{
"data": [
{
"id": "60d21b4667d0d8992e610c85",
"image": "https://img.dummyapi.io/photo-1564694202779-bc908c327862.jpg",
"likes": 43,
"tags": [
"animal",
"dog",
"golden retriever"
],
"text": "adult Labrador retriever",
"publishDate": "2020-05-24T14:53:17.598Z",
"owner": {
"id": "60d0fe4f5311236168a109ca",
"title": "ms",
"firstName": "Sara",
"lastName": "Andersen",
"picture": "https://randomuser.me/api/portraits/women/58.jpg"
}
},
{
"id": "60d21b4967d0d8992e610c90",
"image": "https://img.dummyapi.io/photo-1510414696678-2415ad8474aa.jpg",
"likes": 31,
"tags": [
"snow",
"ice",
"mountain"
],
"text": "ice caves in the wild landscape photo of ice near ...",
"publishDate": "2020-05-24T07:44:17.738Z",
"owner": {
"id": "60d0fe4f5311236168a10a0b",
"title": "miss",
"firstName": "Margarita",
"lastName": "Vicente",
"picture": "https://randomuser.me/api/portraits/med/women/5.jpg"
}
},
{
"id": "60d21b8667d0d8992e610d3f",
"image": "https://img.dummyapi.io/photo-1515376721779-7db6951da88d.jpg",
"likes": 16,
"tags": [
"dog",
"pet",
"canine"
],
"text": "@adventure.yuki frozen grass short-coated black do...",
"publishDate": "2020-05-24T05:44:55.297Z",
"owner": {
"id": "60d0fe4f5311236168a109ed",
"title": "miss",
"firstName": "Kayla",
"lastName": "Bredesen",
"picture": "https://randomuser.me/api/portraits/med/women/13.jpg"
}
},
{
"id": "60d21b3a67d0d8992e610c60",
"image": "https://img.dummyapi.io/photo-1581804928342-4e3405e39c91.jpg",
"likes": 7,
"tags": [
"canine",
"pet",
"mammal"
],
"text": "Hiking with my dog in the woods. black labrador re...",
"publishDate": "2020-05-23T22:56:11.424Z",
"owner": {
"id": "60d0fe4f5311236168a109d5",
"title": "mrs",
"firstName": "Sibylle",
"lastName": "Leibold",
"picture": "https://randomuser.me/api/portraits/med/women/89.jpg"
}
},
{
"id": "60d21bf967d0d8992e610e9b",
"image": "https://img.dummyapi.io/photo-1574457547512-5b1646994eea.jpg",
"likes": 28,
"tags": [
"dog",
"human",
"animal"
],
"text": "Two boys hug their dogs in a leaf pile in the fall...",
"publishDate": "2020-05-23T18:52:32.613Z",
"owner": {
"id": "60d0fe4f5311236168a109f7",
"title": "mrs",
"firstName": "Jolanda",
"lastName": "Lacroix",
"picture": "https://randomuser.me/api/portraits/med/women/32.jpg"
}
},
{
"id": "60d21b7d67d0d8992e610d25",
"image": "https://img.dummyapi.io/photo-1498534928137-473daa67f5c4.jpg",
"likes": 18,
"tags": [
"dog",
"animal",
"pet"
],
"text": "Bone salt and pepper schnauzer puppy",
"publishDate": "2020-05-23T14:42:22.808Z",
"owner": {
"id": "60d0fe4f5311236168a109e4",
"title": "mr",
"firstName": "Pwry",
"lastName": "Shylyrd",
"picture": "https://randomuser.me/api/portraits/med/men/37.jpg"
}
},
{
"id": "60d21bd767d0d8992e610e31",
"image": "https://img.dummyapi.io/photo-1576707064479-3139e7e8aace.jpg",
"likes": 19,
"tags": [
"animal",
"canine",
"dog"
],
"text": "Sleeping dogs lie two dogs lying on black textile",
"publishDate": "2020-05-23T12:55:22.576Z",
"owner": {
"id": "60d0fe4f5311236168a10a0f",
"title": "mr",
"firstName": "Kaya",
"lastName": "Basoglu",
"picture": "https://randomuser.me/api/portraits/med/men/59.jpg"
}
},
{
"id": "60d21baa67d0d8992e610da7",
"image": "https://img.dummyapi.io/photo-1500879747858-bb1845b61beb.jpg",
"likes": 242,
"tags": [
"dog",
"animal",
"golden retriever"
],
"text": "Dog in a forest at sunset dog in forest with sun r...",
"publishDate": "2020-05-22T22:27:12.912Z",
"owner": {
"id": "60d0fe4f5311236168a10a29",
"title": "ms",
"firstName": "Vanessa",
"lastName": "Ramos",
"picture": "https://randomuser.me/api/portraits/med/women/33.jpg"
}
},
{
"id": "60d21af967d0d8992e610ba1",
"image": "https://img.dummyapi.io/photo-1568572933382-74d440642117.jpg",
"likes": 79,
"tags": [
"dog",
"animal",
"husky"
],
"text": "black and white Husky",
"publishDate": "2020-05-22T20:05:03.653Z",
"owner": {
"id": "60d0fe4f5311236168a109e4",
"title": "mr",
"firstName": "Pwry",
"lastName": "Shylyrd",
"picture": "https://randomuser.me/api/portraits/med/men/37.jpg"
}
},
{
"id": "60d21aeb67d0d8992e610b79",
"image": "https://img.dummyapi.io/photo-1579562243430-4732bcb09d91.jpg",
"likes": 17,
"tags": [
"dog",
"pet",
"animal"
],
"text": "Milo durmiendo después de un largo día de jugar en...",
"publishDate": "2020-05-22T07:50:38.093Z",
"owner": {
"id": "60d0fe4f5311236168a109ce",
"title": "mr",
"firstName": "Rudi",
"lastName": "Droste",
"picture": "https://randomuser.me/api/portraits/med/men/83.jpg"
}
},
{
"id": "60d21bad67d0d8992e610daf",
"image": "https://img.dummyapi.io/photo-1568480541687-16c2f73eea4c.jpg",
"likes": 12,
"tags": [
"dog",
"beach",
"shoreline"
],
"text": "Gratitude short-coated tan dog on seashore",
"publishDate": "2020-05-22T06:33:02.593Z",
"owner": {
"id": "60d0fe4f5311236168a109dd",
"title": "mr",
"firstName": "Miguel",
"lastName": "Lima",
"picture": "https://randomuser.me/api/portraits/med/men/31.jpg"
}
},
{
"id": "60d21bee67d0d8992e610e79",
"image": "https://img.dummyapi.io/photo-1517884467367-ac2e21e46d0b.jpg",
"likes": 43,
"tags": [
"pet",
"canine",
"grey"
],
"text": "@adventure.yuki peekaboo adult short-coated black ...",
"publishDate": "2020-05-22T03:10:54.820Z",
"owner": {
"id": "60d0fe4f5311236168a109e6",
"title": "miss",
"firstName": "Milla",
"lastName": "Pollari",
"picture": "https://randomuser.me/api/portraits/med/women/89.jpg"
}
},
{
"id": "60d21bd267d0d8992e610e21",
"image": "https://img.dummyapi.io/photo-1548658146-f142deadf8f7.jpg",
"likes": 92,
"tags": [
"dog",
"grey",
"puppy"
],
"text": "front view of black and white puppy sitting on bro...",
"publishDate": "2020-05-21T22:15:26.266Z",
"owner": {
"id": "60d0fe4f5311236168a10a12",
"title": "mr",
"firstName": "Kenneth",
"lastName": "Carter",
"picture": "https://randomuser.me/api/portraits/med/men/40.jpg"
}
},
{
"id": "60d21b1a67d0d8992e610c05",
"image": "https://img.dummyapi.io/photo-1535008652995-e95986556e32.jpg",
"likes": 15,
"tags": [
"human",
"ocean",
"nature"
],
"text": "Random man walking with his dogs man and dogs on t...",
"publishDate": "2020-05-21T15:53:26.275Z",
"owner": {
"id": "60d0fe4f5311236168a109e7",
"title": "mr",
"firstName": "Joey",
"lastName": "Oliver",
"picture": "https://randomuser.me/api/portraits/med/men/61.jpg"
}
},
{
"id": "60d21be267d0d8992e610e52",
"image": "https://img.dummyapi.io/photo-1580734075803-ac9cdb54fb03.jpg",
"likes": 3,
"tags": [
"dog",
"canine",
"animal"
],
"text": "Majestic looking dog on a lake white and brown sho...",
"publishDate": "2020-05-21T15:15:02.703Z",
"owner": {
"id": "60d0fe4f5311236168a109e3",
"title": "mr",
"firstName": "Vetle",
"lastName": "Aasland",
"picture": "https://randomuser.me/api/portraits/med/men/97.jpg"
}
},
{
"id": "60d21b3667d0d8992e610c56",
"image": "https://img.dummyapi.io/photo-1558556249-076e42967a24.jpg",
"likes": 27,
"tags": [
"dog",
"animal",
"canine"
],
"text": "two puppies next to each other",
"publishDate": "2020-05-21T07:03:58.248Z",
"owner": {
"id": "60d0fe4f5311236168a10a1a",
"title": "mr",
"firstName": "Vaino",
"lastName": "Sakala",
"picture": "https://randomuser.me/api/portraits/med/men/56.jpg"
}
},
{
"id": "60d21b0767d0d8992e610bcf",
"image": "https://img.dummyapi.io/photo-1556526588-a0bd9b5a42c3.jpg",
"likes": 54,
"tags": [
"canine",
"dog",
"pet"
],
"text": "two white dogs",
"publishDate": "2020-05-21T02:10:33.421Z",
"owner": {
"id": "60d0fe4f5311236168a109fa",
"title": "ms",
"firstName": "Ann",
"lastName": "Mason",
"picture": "https://randomuser.me/api/portraits/med/women/18.jpg"
}
},
{
"id": "60d21afd67d0d8992e610bad",
"image": "https://img.dummyapi.io/photo-1575495679620-2ff225c75d5a.jpg",
"likes": 20,
"tags": [
"pet",
"animal",
"mammal"
],
"text": "A picture of my golden doodle, Yogi Bear white dog",
"publishDate": "2020-05-20T21:49:33.321Z",
"owner": {
"id": "60d0fe4f5311236168a10a2c",
"title": "mr",
"firstName": "Toralf",
"lastName": "Streicher",
"picture": "https://randomuser.me/api/portraits/med/men/80.jpg"
}
},
{
"id": "60d21b0467d0d8992e610bc5",
"image": "https://img.dummyapi.io/photo-1549937334-e94f33e69787.jpg",
"likes": 5,
"tags": [
"dog",
"pet",
"mammal"
],
"text": "long-coated brown dog",
"publishDate": "2020-05-20T21:00:40.371Z",
"owner": {
"id": "60d0fe4f5311236168a10a0d",
"title": "mr",
"firstName": "Lyam",
"lastName": "Morin",
"picture": "https://randomuser.me/api/portraits/med/men/95.jpg"
}
},
{
"id": "60d21bf367d0d8992e610e88",
"image": "https://img.dummyapi.io/photo-1564849444446-f876dcef378e.jpg",
"likes": 40,
"tags": [
"plant",
"mammal",
"pet"
],
"text": "A feral cat short-fur gray and orange cat on green...",
"publishDate": "2020-05-20T18:51:23.478Z",
"owner": {
"id": "60d0fe4f5311236168a109f4",
"title": "mr",
"firstName": "Benjamin",
"lastName": "Holland",
"picture": "https://randomuser.me/api/portraits/med/men/58.jpg"
}
}
],
"total": 873,
"page": 0,
"limit": 20
}How can I map all elements and by example display every posts ids ? where is my error, please?
CodePudding user response：
import React from "react";
import axios from "axios";
import { useQuery } from "react-query";
export default function Home() {
async function fetcher() {
const res = await axios.get("https://dummyapi.io/data/v1/post", {
headers: {
"app-id": "#####",
},
});
return res.data;
}
const { isLoading, data } = useQuery("getPosts", () => fetcher());
// console.log(data)
if (isLoading) {
return <p> IsLoading... </p>;
}
return (
<div>
{data.map((e) => (
<p key={e}> {e.id} </p>
))}
</div>
);
}You are getting an object from the API, you should access the data property and then map over it. Also make the fetcher async.