WordPress - 如何阻止 Gutenberg Block 触发多个 GET 请求？

Question

修好了！

我是如何解决的？

好吧，在查找了有关获取的所有文档和问题之后，我记得带有 function 和括号的按钮总是会触发。在我删除括号的那一刻，它停止了GET 请求的无限循环。

<button onclick={fetchingId}>Chercher le produit</button>

现在，问题是它似乎不起作用并且该功能没有触发。 我目前正在尝试一些 Gutenberg 组件来帮助我触发该功能并按需获取 API。

编辑

有人让我注意到我应该传递函数而不是结果。

onclick 里面的函数应该是：

() => fetchingId(attributes.ids)

我用组件名称<Button>切换了HTML按钮：

<Button
    isPrimary
    className='fetch-product'
    onClick={() => fetchingId(attributes.ids)}>
        Chercher un produit
</Button>

---

从 WordPress StackExchange 有人告诉我，我们不应该在 React 组件中使用函数，而应该使用 useEffect。

The other thread with a solution.

原帖：

我一直在构建一个向 Woocommerce REST API 发送 GET 请求的 Gutenberg Block。

它由文本input 组成，该文本接收产品的 ID 并将其提取到 Woocommerce REST API。它还有一个button，它会触发一个函数来使用 API 获取产品。

GET 请求的问题

获取效果很好，但它会不断发送多个GET 请求，即使我没有单击按钮来触发该功能。当我每次更改 ID 时只需要一个请求时，只需单击输入即可发送多个请求。

代码

这是编辑功能的第一部分：

const edit = ({ attributes, setAttributes }) => {

    const blockProps = useBlockProps();

    // Wrapped the WooCommerce.get() function in a function named `fetchingId` to call it with a button
    const fetchingId = async (id) => {
      // The WooCoommerce.get() function
      const response = await WooCommerce.get(`products/${id}`)
        .then((response) => {
          console.log(response.data);
          setAttributes({ price: response.data.price });
          setAttributes({ name: response.data.name });
        })
        .catch((error) => {
          console.log(error.response.data);
          setAttributes({ price: '' });
          setAttributes({ name: '' });
        });
    }

    ...

  }

这是函数的另一部分：更新用于GET 请求的Product ID 的输入和链接到fetchingId() 函数的按钮。

return <div {...blockProps}>
    <div class="wrapper-input" >
        <TextControl
          label={__('ID du Produit', 'ingredient-unique')}
          value={attributes.id}
          onChange={(val) => setAttributes({ id: val })}
          className='control-id'
        />
    </div>
    <button onclick={fetchingId(attributes.id)}>Chercher le produit</button>

    ...
</div>;

Answer 1

修好了！

我是如何解决的？

好吧，在查找了有关获取的所有文档和问题之后，我记得带有带括号的函数的按钮总是会触发。在我删除括号的那一刻，它停止了GET 请求的无限循环。

<button onclick={fetchingId}>Chercher le produit</button>

现在，问题是它似乎不起作用并且该功能没有触发。我目前正在尝试一些 Gutenberg 组件来帮助我触发该功能并按需获取 API。 编辑

有人让我注意到我应该传递函数而不是结果。

onclick里面的函数应该是：

() => fetchingId(attributes.ids)

我用组件名称切换了 HTML 按钮：

<Button
    isPrimary
    className='fetch-product'
    onClick={() => fetchingId(attributes.ids)}>
        Chercher un produit
</Button>

从 WordPress StackExchange 有人告诉我，我们不应该在 React 组件中使用函数，而是使用 useEffect。