Postingan lainnya
Fetch data dengan useEffect dan axios Reactjs
Hallo mohon bantuannya, bagaimana cara mengatasi error " 'peoples' is not defined no-undef " saat memanggil api dengan multi result
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function View002() {
const [data, setData] = useState( {
order:[],
peoples:[],
medias:[],
})
const getData = async () =>{
try {
let response = await axios.get('http://example.com/public_api/')
setData({
order : response.data.order,
peoples : response.data.people,
medias : response.data.media,
})
} catch(e){
console.log(e.message);
}
}
useEffect(() => {
getData();
}, []);
return (
<div>
<ul>
{
peoples.map(people => {
return (
<li key={people.id}>{people.full_name}</li>
)
})
}
</ul>
</div>
);
}
export default View002;
mohon pencerahnya!
2 Jawaban:
Jawaban Terpilih
<div>Saat ada undefined dari API, cek dulu apakah hasil responsenya sudah sesuai kesingin kamu, datanya sudah ada atau belum.<br><br>Untuk mengambil data dari useState react, tetap gunakan nama parentnnya<br>contoh di kamu<br><br></div><pre>data.people.map..... </pre>
Tanggapan
Saya kesulitan jika mengambil data multi array dari API nya kak , jika hanya memanggil 1 data seperti peoples saja bisa jalan . Bisa tolong dilihat pada komentar saya dibawah untuk codenya!
kalau yang dimap data.people.map gimana hasilnya?
Sudah bisa kak , terima kasih bantuanya
sama sama, senang bisa bantu , berarti jawabannya yang data.people.map ya?
<div>Saya kesulitan jika mengambil data multi array dari API, jika hanya memanggil 1 data seperti peoples saja bisa jalan dengan kode berikut .</div><pre>import React, { useState, useEffect } from 'react'; import axios from 'axios';
function Wd001comp() { const [data, setData] = useState([]) const getData = async () =>{ try { let response = await axios.get('http://example.com/public-api') setData(response.data.people) } catch(e){ console.log(e.message); } }
useEffect(() => { getData(); }, []);
return ( <div> <ul> { data.map(people => { return ( <li key={people.id}>{people.full_name}</li> ) }) } </ul> </div> ); }
export default Wd001comp;</pre><div><br>bagaimana caranya agar bisa mengambil data array yang lain tanpa harus fetch satu per satu dengan bentuk json berikut ? <br><br></div><pre>{ "order":{ "id":1, "url":"Urlnya", "title":"Judul" }, "people":[ { "id":1, "full_name":"akakakaka" }, { "id":2, "full_name":"bkbkbkkb" }, ] "media":[ { "id":1, "image":"akakakaka.jpg" }, { "id":2, "image":"bkbkbkkb.jpg" }, ] }</pre>