shopify结帐扩展无限循环问题

Question

我正在为送货页面制作第一个 Shopify 结账应用程序，我遇到了这个问题，当我使用“useSubscription”更新值时，它会产生无限循环（我的控制台中无限地有“测试”），我该如何修复这个请吗？

我不知道这是否是一个 useEffect 问题，因为我不怎么使用 React，但我确实知道，对于一个空的依赖数组，它应该在第一次渲染时只影响数据一次，顺便说一句，当我评论useSubscription 部分，在第一次渲染时，当我只有 4 个shippingMethods 时，我记录了 16x 'test'，当我开始而不评论这部分并更改shipping method时，它会进入无限循环。

这是我的代码

import {
  Text,
  useApi,
  useTranslate,
  reactExtension,
  useSubscription,
} from '@shopify/ui-extensions-react/checkout';
import { useEffect, useState } from 'react';
import i18nIsoCountries from 'i18n-iso-countries';
i18nIsoCountries.registerLocale(require("i18n-iso-countries/langs/en.json"));

export default reactExtension(
  'purchase.checkout.shipping-option-item.render-after',
  () => <Extension />,
);

function Extension() {
  const { shop, shippingAddress, lines, target, query, i18n, applyAttributeChange, isTargetSelected, deliveryGroups } = useApi();
  const translate = useTranslate();
  const [items, setItems] = useState([]);
  const [dalMin, setDalMin] = useState();
  const [dalMax, setDalMax] = useState();

  console.log('test')

  const country = i18nIsoCountries.getName(shippingAddress.current.countryCode, 'en');
  const shopDomain = shop.myshopifyDomain;
  const shippingMethodTitle = target.current.title;

const _deliveryGroups = useSubscription(deliveryGroups);

  useEffect(() => {
    if (isTargetSelected.current) {
      updateAttributes();
    }
  }, [_deliveryGroups]);

  const updateAttributes = async () => {
    if (isTargetSelected.current && dalMin && dalMax) {
      const res = await applyAttributeChange({
        type: 'updateAttribute',
        key: 'dal_min',
        value: dalMin.toISOString().slice(0, 10),
      });
      await applyAttributeChange({
        type: 'updateAttribute',
        key: 'dal_max',
        value: dalMax.toISOString().slice(0, 10),
      });
      console.log(res);
    }
  }

  useEffect(() => {
    async function fetchSkus() {
      try {
        const res = await query(`{
      nodes(ids:[${lines.current.map((l) => `"${l.merchandise.id}"`).join(',')}]){
        ...on ProductVariant{
          sku
        }
      }
    }`);
        if (res.errors) {
          const err = new Error('Failed to fetch skus');
          err.errors = res.errors;
          throw err;
        }
        setItems(res.data.nodes);
      } catch (err) {
        console.error(err)
      }
    }
    async function fetchDal() {
      try {
        await fetchSkus();
        // post request to personal api to calculate dalMin and dalMax that are specific dates
        const json = await res.json();
        setDalMin(new Date(json.dals[0].dalMin));
        setDalMax(new Date(json.dals[0].dalMax));
        }
      } catch (err) {
        console.error(err)
      }
    }
    fetchDal();
  }, []);

  if (dalMin && dalMax) {
    return (
      <Text size='small' appearance='subdued'>
        {translate('delai', { dalMin: i18n.formatDate(dalMin, { dateStyle: 'short' }), dalMax: i18n.formatDate(dalMax, { dateStyle: 'short' }) })}
      </Text>
    );
  }
}

“type:success”对象来自“updateAttributes”函数中的日志

Answer 1

我找到了解决方案，在react中不要使用useSubscription，使用shopify hooks，很难顺便找到这个信息（或者我是盲目的？我不知道），对于这种情况我这样做了

const { isTargetSelected, shippingOptionTarget } = useShippingOptionTarget();
const applyAttributeChange = useApplyAttributeChange();

const updateAttributes = async () => {
  if (isTargetSelected && dalMin && dalMax) {
    await applyAttributeChange({
      type: 'updateAttribute',
      key: 'dal_min',
      value: dalMin.toISOString().slice(0, 10),
    });
    await applyAttributeChange({
      type: 'updateAttribute',
      key: 'dal_max',
      value: dalMax.toISOString().slice(0, 10),
    });
  }
}

if (isTargetSelected && shippingOptionTarget) {
  updateAttributes();
}

当客户更改运输方式时，它会更新属性