reactjs - kuinka luoda mukautettu hook Reactissa tämän nykyisen useState-käytön perusteella

Olen tällä hetkellä opiskelemassa Reactia ja mukautettuja hookeja, ja sain tämän, en ole varma, miten tässä tapauksessa pitäisi olla mukautettu hook, mitä sen pitäisi palauttaa, mitä minun pitäisi palauttaa?, kaikki apu siihen olisi arvostettua, kiitos etukäteen

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();
            })()
        );

mahdollinen mukautettu koukku:

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?

Vastaus #1

Olen melko varma, ettet voi kutsua tilapäivitystä laiskan alustustoiminnon sisältä, joka on annettu käytännössä "rakentajalle".

Sen sijaan, että yrittäisit "asettaa tilan", palauta yksinkertaisesti arvo, jonka haluat olevan alkuperäinen tila. Lähetä value omaan hakemistoosi, jotta se voidaan välittää alustajafunktiolle.

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] ;
}

Käyttö :

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