WordPress - 如何阻止古腾堡块触发多个 GET 请求？

Question

已修复！

我是怎么解决的？

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

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

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

编辑

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

onclick里面的函数应该是：

() => fetchingId(attributes.ids)

我将 HTML 按钮切换为组件名称 <Button>:

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

---

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

The other thread with a solution.

原文post：

我一直在构建一个向 Woocommerce REST API.

发送 GET 请求的 Gutenberg Block

它由接收产品 ID 并将其提取到 Woocommerce REST API 的文本 input 组成。它还有一个 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>

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

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

onclick 里面的函数应该是：

() => fetchingId(attributes.ids)

我将 HTML 按钮切换为组件名称：

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

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