Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
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>