xxxxxxxxxx
import {useEffect,useState} from 'react'
const App = () => {
const [data,setData] = useState([])
useEffect(()=>{
fetch('https://fakestoreapi.com/products').then(res => res.json()).then(data => {
setData(data);
}).catch(e=>console.log(e.message));
},[])
console.log(data);
return (
<div>
{data.map(i => <p key={i.id}>{i.title}</p> )}
</div>
)
}
export default App
xxxxxxxxxx
useEffect(() => {
const url = "https://api.adviceslip.com/advice";
const fetchData = async () => {
try {
const response = await fetch(url);
const json = await response.json();
console.log(json);
} catch (error) {
console.log("error", error);
}
};
fetchData();
}, []);
xxxxxxxxxx
// mycomponent.js
import React, { useEffect, useState} from 'react';
import axios from 'axios';
const MyComponent = () => {
const [loading, setLoading] = useState(true);
const [data, setData] = useState([])
useEffect(() => {
const fetchData = async () =>{
setLoading(true);
try {
const {data: response} = await axios.get('/stuff/to/fetch');
setData(response);
} catch (error) {
console.error(error.message);
}
setLoading(false);
}
fetchData();
}, []);
return (
<div>
{loading && <div>Loading</div>}
{!loading && (
<div>
<h2>Doing stuff with data</h2>
{data.map(item => (<span>{item.name}</span>))}
</div>
)}
</div>
)
}
export default MyComponent;
xxxxxxxxxx
import { useState, useEffect } from 'react'
const App = () => {
const [data, useData] = useState(null);
useEffect(() => {
const url = 'endpoint url';
fetch(url)
.then(res => res.json())
.then(data => setData(data))
};
return (
<div id='App'>
{ data && <p>data.id</p> }
</div>
);
};
export default App
xxxxxxxxxx
import { Suspense } from 'react';
async function fetchData( ) {
const response = await
fetch('https://api.example.com/data');
return await response.json();
}
function MyComponent( ) {
const data = use(fetchData);
return (
<Suspense fallback={<div>Loading data < /div>}>
<div>
<h1>My Data</h1>
<p>{data.message}</p>
</div>
</Suspense>
);
}