2

我调用了一个正常工作的 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])

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

我怎样才能解决这个问题？

4

1 回答 1

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]);
于 2021-12-16T05:53:07.363 回答