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

Posted 2023-02-19

【中文标题】WordPress - 如何阻止 Gutenberg Block 触发多个 GET 请求？

【英文标题】：WordPress - How do I stop a Gutenberg Block from firing multiple GET Requests?

【发布时间】：2021-05-13 04:32:45

【问题描述】：

修好了！

我是如何解决的？

好吧，在查找了有关获取的所有文档和问题之后，我记得带有 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>;

【参考方案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。