ตอบสนองตะขอที่กำหนดเอง
ตะขอเป็นฟังก์ชันที่ใช้ซ้ำได้
เมื่อคุณมีลอจิกของคอมโพเนนต์ที่ต้องใช้โดยคอมโพเนนต์หลายตัว เราสามารถแยกลอจิกนั้นไปยัง Hook ที่กำหนดเองได้
Custom Hooks เริ่มต้นด้วย "use" ตัวอย่าง: useFetch
.
สร้างตะขอ
ในโค้ดต่อไปนี้ เรากำลังดึงข้อมูลในHome
คอมโพเนนต์ของเราและแสดงข้อมูลดังกล่าว
เราจะใช้ บริการ JSONPlaceholderเพื่อดึงข้อมูลปลอม บริการนี้เหมาะสำหรับการทดสอบแอปพลิเคชันเมื่อไม่มีข้อมูลอยู่แล้ว
หากต้องการเรียนรู้เพิ่มเติม โปรดดูส่วนJavaScript Fetch API
ใช้บริการ JSONPlaceholder เพื่อดึงรายการ "todo" ปลอมและแสดงชื่อบนหน้า:
ตัวอย่าง:
index.js
:
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const Home = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((data) => setData(data));
}, []);
return (
<>
{data &&
data.map((item) => {
return <p key={item.id}>{item.title}</p>;
})}
</>
);
};
ReactDOM.render(<Home />, document.getElementById("root"));
อาจจำเป็นต้องใช้ตรรกะการดึงข้อมูลในส่วนประกอบอื่นๆ ด้วย ดังนั้นเราจะแยกข้อมูลนั้นลงใน Hook ที่กำหนดเอง
ย้ายตรรกะการดึงข้อมูลไปยังไฟล์ใหม่เพื่อใช้เป็น Hook แบบกำหนดเอง:
ตัวอย่าง:
useFetch.js
:
import { useState, useEffect } from "react";
const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => setData(data));
}, [url]);
return [data];
};
export default useFetch;
index.js
:
import ReactDOM from "react-dom";
import useFetch from "./useFetch";
const Home = () => {
const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");
return (
<>
{data &&
data.map((item) => {
return <p key={item.id}>{item.title}</p>;
})}
</>
);
};
ReactDOM.render(<Home />, document.getElementById("root"));
ตัวอย่างที่อธิบาย
เราได้สร้างไฟล์ใหม่ที่เรียกว่าuseFetch.js
มีฟังก์ชันที่เรียกว่าuseFetch
ซึ่งมีตรรกะทั้งหมดที่จำเป็นในการดึงข้อมูลของเรา
เราลบ URL แบบกำหนดค่าตายตัวและแทนที่ด้วยurl
ตัวแปรที่สามารถส่งผ่านไปยัง Hook ที่กำหนดเองได้
สุดท้ายนี้ เรากำลังส่งคืนข้อมูลจาก Hook ของเรา
ในindex.js
เรากำลังนำเข้าuseFetch
Hook ของเราและใช้งานเหมือน Hook อื่นๆ นี่คือที่ที่เราส่งผ่าน URL เพื่อดึงข้อมูล
ตอนนี้เราสามารถนำ Hook ที่กำหนดเองนี้มาใช้ซ้ำในส่วนประกอบใดก็ได้เพื่อดึงข้อมูลจาก URL ใดๆ