Question

如何使用依赖于 webapi 的 useMemo

2021-12-15

46

reactjs react-hooks react-usememo

我有一个调用的 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 包含数据，现在我有另一个名为 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;
}
const use = useMemo(() => PaymentCalculator(), [weight])

但似乎 PaymentCalculator 在 useEffect 之前被调用了！！

我该如何解决这个问题？

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