Как остановить блок Гутенберга от запуска нескольких запросов GET?

Я создавал блок Гутенберга, который отправляет запрос GET в API REST Woocommerce.

Он состоит из текста input, который получает идентификатор продукта и отправляет его в API REST Woocommerce. В нем также есть button, который запускает функцию для извлечения продукта с помощью API.

Проблема с запросами GET

Выборка работает хорошо, но она продолжает отправлять несколько запросов GET, даже когда я не нажимаю кнопку, чтобы запустить функция. Простое нажатие на ввод отправляет несколько запросов, когда мне нужен только один каждый раз, когда я меняю идентификатор и нажимаю кнопку.

Я импортирую WooCommerceRestApi из "@woocommerce/woocommerce-rest-api" и использую Node.js .

Код

Это первая часть функции редактирования:

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: '' });
        });
    }

    ...

  }

Это еще одна часть функции: ввод, который обновляет Product ID, используемый для запроса GET, и кнопка, связанная с функцией 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>;