reactjs - ako vytvoriť vlastný hook v Reacte pre toto aktuálne použitie useState

Momentálne sa učím React a vlastné hooky a mám toto, nie som si istý, ako by mal byť v tomto prípade použitý vlastný hook, čo by sa malo vrátiť, čo musím vrátiť? Akákoľvek pomoc bude ocenená, vopred ďakujem.

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

možný vlastný hák:

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?

Odpoveď č. 1

Som si celkom istý, že nemôžete volať aktualizátor stavu z vnútra funkcie lenivého inicializovania odovzdanej tomu, čo je v podstate „konstruktor“.

Namiesto toho, aby ste sa snažili „nastaviť stav“, jednoducho vráťte hodnotu, ktorú chcete mať ako počiatočný stav. Predajte value do vášho hooku, aby mohla byť odovzdaná inicializačnej funkcii.

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

Použitie :

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