如何使用依赖于 webapi 的 useMemo

Question

我调用了一个正常工作的 webapi:

const [pItem, setPItem] = useState([]);
const [weight, setWeight] = useReducer(weightHandler, 0.0);
useEffect(() => {
    setLoading(true);
    let mounted = true;
    (async function () {
        await getPlantInfoById(itemId)
            .then(item => {
                if (mounted) {
                    setPItem(item)
                    setLoading(false);
                }
            })
    })();
    return () => { mounted = false; }
}, [itemId])

这里 pItem 包含数据，现在我有另一个填充的称为权重（可以由用户更改）。

所以我需要根据体重变化进行一些计算：

const PaymentCalculator = function () {
    const [item] = [...pItem];
    const priceWithDiscount = DiscountCalc(item.price, item.discount);
    const divideWeight = weight / item.weight;
    const result = (divideWeight * priceWithDiscount) * 1000;

    return result;
}
const use = useMemo(() => PaymentCalculator(), [weight])

但似乎在 useEffect 之前调用了 PaymentCalculator !!

我该如何解决这个问题？

Answer 1

如果您检查 paymentCalculator 的内容，您会发现您不仅仅是 weight 作为依赖项。

const PaymentCalculator = function () {
  const [item] = [...pItem];
  const priceWithDiscount = DiscountCalc(item.price, item.discount);
  const divideWeight = weight / item.weight;
  const result = (divideWeight * priceWithDiscount) * 1000;

  return result;
}

pItem也是一个依赖！

最初 pItem 是一个空数组，并且由于在每个渲染周期都会调用所有挂钩，这意味着 item 在初始渲染和访问 item.price 时未定义，并且item.discount 将在尝试“访问未定义的 X”时抛出错误。

将 pItem 添加到依赖项数组并提供后备值。

const paymentCalculator = function() {
  const [item = {}] = [...pItem];

  const priceWithDiscount = discountCalc(item.price, item.discount);
  const divideWeight = weight / item.weight;
  const result = (divideWeight * priceWithDiscount) * 1000;

  return result;
}

...

const use = useMemo(() => PaymentCalculator(), [pItem, weight]);

如何使用依赖于 webapi 的 useMemo

How can I use useMemo dependent on the webapi

reactjs

react-hooks

react-usememo