React Typescript как вытащить результат промиса из хука?

Question

const priceBounds = useMemo(() => {
    const brandPrices: Promise<number[]> = getMinMaxPrices(brand);   // fetch функция
    // let min = undefined;     //  не переопределится кодом ниже
    // let max = undefined;    //  --//--
    brandPrices.then((data) => {
        const values: number[] = Object.values(data);
        const min = values[0];     //  !
        const max = values[1];     //  !
    });
    return { min, max, brand }
}, [brand])

Значения min & max находятся в области видимости распаковки промиса, и при return ошибка min is not defined. Если их определить\инициализировать внутри функции выше промиса, то они остаются undefined Если сделать вызов getMinMaxPrices отдельной функцией (или компонентом), то там всё равно будет промис, который надо также распаковывать. Как быть?

Answer 1

Из useMemo нужно вернуть сам Promise

const priceBounds = useMemo(() => {
    const brandPrices: Promise<number[]> = getMinMaxPrices(brand);   // fetch функция
    return brandPrices.then((data) => {
        const values: number[] = Object.values(data);
        const min = values[0];     //  !
        const max = values[1];     //  !
        return { min, max, brand }
    });
}, [brand]);

Альтернативным решением будет замена useMemo на связку useState+useEffect

const [min, setMin] = useState();
const [max, setMax] = useState();

useEffect(()=>{
    const brandPrices: Promise<number[]> = getMinMaxPrices(brand);   // fetch функция
    brandPrices.then((data) => {
        const values: number[] = Object.values(data);
        const min = values[0];     //  !
        const max = values[1];     //  !
        setMin(min);
        setMax(max);
    });
},[brand])

БЛОГ НА HUSL

React Typescript как вытащить результат промиса из хука?

Ответы (1 шт):