ตอบสนองตะขอที่กำหนดเอง


ตะขอเป็นฟังก์ชันที่ใช้ซ้ำได้

เมื่อคุณมีลอจิกของคอมโพเนนต์ที่ต้องใช้โดยคอมโพเนนต์หลายตัว เราสามารถแยกลอจิกนั้นไปยัง 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เรากำลังนำเข้าuseFetchHook ของเราและใช้งานเหมือน Hook อื่นๆ นี่คือที่ที่เราส่งผ่าน URL เพื่อดึงข้อมูล

ตอนนี้เราสามารถนำ Hook ที่กำหนดเองนี้มาใช้ซ้ำในส่วนประกอบใดก็ได้เพื่อดึงข้อมูลจาก URL ใดๆ