คำแนะนำในการดึงและแสดงข้อมูลจาก API ใน React JS

เผยแพร่แล้ว: 2024-10-01

การดึงและแสดงข้อมูลจาก API เป็นงานพื้นฐานในแอปพลิเคชัน React สมัยใหม่ ด้วยวิวัฒนาการของ React การดึงข้อมูลมีความคล่องตัวมากขึ้น และเสนอวิธีการมากมายในการส่งคำขอ HTTP ในคู่มือนี้ เราจะกล่าวถึงขั้นตอนในการดึงข้อมูลและแสดงข้อมูลโดยใช้ React

สารบัญ

สลับ

การตั้งค่าโครงการตอบโต้

ก่อนที่จะเจาะลึกเรื่องการดึงข้อมูล API ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าโปรเจ็กต์ React แล้ว คุณสามารถสร้างได้โดยใช้

  • npx create-react-app my-app
    cd my-app
    npm start

สิ่งนี้จะเริ่มต้นโปรเจ็กต์ React ใหม่และรันเซิร์ฟเวอร์การพัฒนา

️ ทีละขั้นตอน: การดึงข้อมูลใน React

1. สร้างสถานะสำหรับการจัดเก็บข้อมูล

ใช้ตะขอ useState เพื่อสร้างตัวแปรสถานะเพื่อจัดเก็บข้อมูลที่ดึงมา

จาวาสคริปต์

  • const [data, setData] = useState([]);

2. ดึงข้อมูล API ด้วย useEffect

useEffect hook ของ React ช่วยให้มั่นใจได้ว่าการดึงข้อมูลจะเกิดขึ้นเมื่อมีการเมาท์ส่วนประกอบ ฟังก์ชัน fetch() ใช้เพื่อดึงข้อมูลจาก API

จาวาสคริปต์

  • useEffect(() => {
    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error:', error));
    }, []);

3. แสดงข้อมูลที่ดึงมา

เมื่อดึงข้อมูลแล้ว ก็สามารถเรนเดอร์ใน JSX ได้โดยใช้เมธอด map()

  • return (
    <div>
    <ul>
    {data.map(item => (
    <li key={item.id}>{item.name}</li>
    ))}
    </ul>
    </div>
    );

️ การใช้ Axios เพื่อดึงข้อมูล

แม้ว่า fetch() จะเป็น API ของเบราว์เซอร์แบบเนทิฟ แต่นักพัฒนาจำนวนมากชอบใช้ไลบรารีเช่น Axios เนื่องจากความเรียบง่ายและฟีเจอร์อันทรงพลัง นี่คือตัวอย่างการใช้ Axios:

ติดตั้ง Axios :

  • npm install axios

กำลังดึงข้อมูล

  • useEffect(() => {
    axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error('Error:', error));
    }, []);

‍ การจัดการเคส Edge

  • สถานะการโหลด : สิ่งสำคัญคือต้องจัดการสถานะการโหลดในขณะที่กำลังดึงข้อมูล
  • การจัดการข้อผิดพลาด : การใช้การจัดการข้อผิดพลาดที่เหมาะสมสามารถปรับปรุงประสบการณ์ผู้ใช้ได้

ตัวอย่าง:

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

บทสรุป

การดึงและแสดงข้อมูลจาก API ใน React ถือเป็นสิ่งสำคัญสำหรับการสร้างเว็บแอปพลิเคชันแบบไดนามิก ไม่ว่าจะใช้ fetch() API หรือไลบรารีเช่น Axios กระบวนการจะเกี่ยวข้องกับการกำหนดสถานะเพื่อจัดเก็บข้อมูล การร้องขอ และการแสดงผลลัพธ์ ด้วยการทำความเข้าใจขั้นตอนเหล่านี้และจัดการกับ Edge Case เช่น การโหลดและข้อผิดพลาด คุณจะสามารถสร้างแอปที่ตอบสนองและขับเคลื่อนด้วยข้อมูลได้อย่างมีประสิทธิภาพ

คำถามที่พบบ่อย

1. ฉันจะตั้งค่าโปรเจ็กต์ React เพื่อเริ่มดึงข้อมูล API ได้อย่างไร

ในการตั้งค่าโปรเจ็กต์ React ให้รันคำสั่งต่อไปนี้:

npx create-react-app my -app
cd my -app
npm start

สิ่งนี้จะเริ่มต้นโครงการและเริ่มเซิร์ฟเวอร์การพัฒนา

2. ฉันจะจัดเก็บข้อมูลที่ดึงมาใน React ได้อย่างไร

คุณสามารถจัดเก็บข้อมูลที่ดึงมาได้โดยใช้ useState hook ตัวอย่าง:

const [data, setData] = useState ([]);

3. ฉันจะดึงข้อมูลใน React ได้อย่างไรเมื่อส่วนประกอบถูกเมาท์

ใช้ตะขอ useEffect เพื่อดึงข้อมูลเมื่อประกอบส่วนประกอบ:

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. then ( response => response. json ())
. then ( data => setData (data))
. catch ( error => console . error ( 'Error:' , error));
}, []);

4. จุดประสงค์ของการใช้เมธอด map() ใน React เมื่อเรนเดอร์ข้อมูลคืออะไร?

เมธอด map() ใช้เพื่อวนซ้ำอาร์เรย์ข้อมูลที่ดึงมาและแสดงผลแต่ละรายการใน JSX ตัวอย่างเช่น:

<ul>
{data. map ( item => (
< li key = {item.id} > {item.name} </ li >
))}
</ul>

5. เหตุใดฉันจึงใช้ Axios แทน fetch API

นักพัฒนาหลายคนชอบ Axios เพราะมันทำให้คำขอ HTTP ง่ายขึ้น นำเสนอคุณสมบัติที่มากกว่า และรองรับเบราว์เซอร์รุ่นเก่าได้อย่างสม่ำเสมอมากขึ้น

6. ฉันจะติดตั้ง Axios ในโปรเจ็กต์ React ได้อย่างไร

หากต้องการติดตั้ง Axios ให้รัน:

npm install axios

7. ฉันจะดึงข้อมูลโดยใช้ Axios ใน React ได้อย่างไร

ด้วย Axios คุณสามารถดึงข้อมูลดังนี้:

useEffect ( () => {
axios. get ( 'https://api.example.com/data' )
. then ( response => setData (response. data ))
. catch ( error => console . error ( 'Error:' , error));
}, []);

8. ฉันจะจัดการกับสถานะการโหลดเมื่อดึงข้อมูลใน React ได้อย่างไร

คุณสามารถจัดการสถานะการโหลดได้โดยการสร้างตัวแปร loading ด้วย useState ตัวอย่างเช่น:

const [loading, setLoading] = useState ( true );

ใช้เอฟเฟกต์ ( () => {
ดึงข้อมูล ( 'https://api.example.com/data' )
- จากนั้น ( response => response.json ())
- จากนั้น ( ข้อมูล => {
setData (ข้อมูล);
setLoading ( เท็จ );
-
-

9. ฉันจะจัดการกับข้อผิดพลาดในการดึงข้อมูลได้อย่างไร

ในการจัดการข้อผิดพลาด ให้กำหนดสถานะ error และอัปเดตในกรณีที่คำขอล้มเหลว:

const [error, setError] = useState ( null );

useEffect ( () => {
ดึงข้อมูล ( 'https://api.example.com/data' )
- จับ ( ข้อผิดพลาด => {
setError (ข้อผิดพลาด);
setLoading ( เท็จ );
-
-

10. เหตุใดการจัดการ Edge Case เช่น การโหลดและข้อผิดพลาดในการดึงข้อมูล API จึงเป็นสิ่งสำคัญ

การจัดการกรณี Edge เช่นการโหลดและข้อผิดพลาดทำให้มั่นใจได้ว่าผู้ใช้จะได้รับแจ้งเกี่ยวกับสถานะปัจจุบันของการดึงข้อมูล และมอบประสบการณ์ผู้ใช้ที่ราบรื่นยิ่งขึ้นในกรณีที่การดึงข้อมูลล้มเหลวหรือใช้เวลานาน