reactjs - วิธีสร้าง custom hook ใน React สำหรับการใช้งาน useState ปัจจุบันนี้

ฉันกำลังเรียน React และ custom hooks อยู่ตอนนี้และฉันเจอปัญหานี้ ไม่แน่ใจว่าควรจะมี custom hook ในกรณีนี้ได้อย่างไร ควรจะ return อะไร ฉันต้อง return อะไรบ้าง? การช่วยเหลือใด ๆ จะเป็นที่ชื่นชม ขอบคุณล่วงหน้า

const [newResultDate, setNewResultDate] = useState<Date>(
            (() => {
                if (value?.startDate) {
                    return new Date(value.startDate);
                } else if (value?.daysUpToDay) {
                    return new Date();
                }
                try {
                    const date = new Date(value);
                    if (date && date.toString() !== 'Invalid Date') {
                        return date;
                    }
                } catch (e) {
                    // noop
                }
                return new Date();
            })()
        );

ฮุกกำหนดเองที่เป็นไปได้:

const useCustomHook = (dateFilter: ( dateProps)) => {
    const [newResultDate, setNewResultDate] = useState<Date>();

    const setDateValue = (val) => setNewResultDate(val);

    if (dateFilter?.startDate) {
        setNewResultDate(new Date(dateFilter.startDate));
    } else if (dateFilter?.daysUpToDay) {
        setNewResultDate(new Date());
    }
    try {
        const date = new Date(dateFilter as any);
        if (date && date.toString() !== 'Invalid Date') {
            setNewResultDate(date);
        }
    } catch (e) {
        // noop
    }
    setNewResultDate(new Date());

    return [newResultDate, setDateValue] as const;
};


is this correct?

how is supposed to be used on my component?

คำตอบ #1

ฉันค่อนข้างแน่ใจว่าคุณ ไม่สามารถ เรียกตัวปรับปรุงสถานะจากภายในฟังก์ชันการเริ่มต้นแบบขี้เกียจที่ส่งไปยังสิ่งที่มีประสิทธิภาพเหมือนกับ "constructor"

แทนที่จะพยายาม "กำหนดสถานะ" ให้เพียงแค่ส่งค่าที่คุณต้องการให้เป็นสถานะเริ่มต้น ส่ง value ไปยัง hook ของคุณเพื่อให้สามารถส่งไปยังฟังก์ชันตัวเริ่มต้นได้

const initializeState = (value) => {
  if (value?.startDate) {
    return new Date(value.startDate);
  } else if (value?.daysUpToDay) {
    return new Date();
  }
  try {
    const date = new Date(value);
    if (date?.toString() !== 'Invalid Date') {
      return date;
    }
  } catch (e) {
    // noop
  }
  return new Date();
});

const useCustomHook(value) => {
  const [newResultDate, setNewResultDate] = useState<Date>(() => initializeState(value));
  return [newResultDate, setNewResultDate] ;
}

การใช้งาน :

useCustomHook({ startDate: "2022-01-22" });