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

Question

我一直在构建一个Gutenberg，它向Woocommerce REST发送一个GET请求。

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

GET请求

的问题

抓取运行良好，但它仍然发送多个GET请求，即使我没有单击按钮来触发函数。只要单击输入，每当每次更改ID并单击该按钮时，我只需发送多个请求。

我从"@woocommerce/woocommerce-rest-api"导入D7并使用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: '' });
        });
    }

    ...

  }

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

return 
    
         setAttributes({ id: val })}
          className='control-id'
        />
    
    Chercher le produit

    ...
;

Answer 1

您不应该在响应组件中直接生成HTTP请求等，您需要使用useEffect。

一个react组件需要尽可能快地运行，即使还没有完成需要完成的工作。通过使用useEffect，您可以告诉React在呈现完成后运行一个单独的函数，从而使您有机会发出请求，并使您的组件具有“效果”。React还允许您传递一个依赖项列表，它将监视这些依赖项，如果它们更改了效果，则重新运行。

但是，您所拥有的是直接在组件中运行的副作用。因此，每当组件被重新呈现时，您的代码就会生成一个HTTP，除了这个问题之外，还会显著降低编辑器的速度。通过设计，任何时候都可以进行重渲染。窗口调整大小、偏离dom事件、父组件中的状态更改等。

如果这有帮助的话，一个常见的方法就是用这样的方法来显示：

const { isLoading, setLoading } = useState( false );

这样，您可以在setLoading( false )函数的末尾调用useEffect，然后在组件中显示加载消息。

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

您不能依赖这里存在的这些值。您可以通过事件触发函数，该函数可能会产生副作用，如HTTP请求，但不能在组件中直接执行这些操作。呈现组件应该呈现组件，而<#>只呈现组件，其他一切都处于生命周期钩子/函数中。