Please help.
The following error is returning when useEffect hook is used however I need to use this hook to fetch WP API.
Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at bb (react-dom.min.js?ver=17.0.1:101:34)
at Object.vh [as useCallback] (react-dom.min.js?ver=17.0.1:108:415)
at c.useCallback (react.min.js?ver=17.0.1:29:406)
at xe (data.min.js?ver=c5f9378263e5eea9d870764c8fc1dd1b:2:21762)
at w (block-editor.min.js?ver=54657317be78fb1c246c72b38dc2ed0e:26:78595)
at Edit (edit.js:67:25)
at Le (react-dom.min.js?ver=17.0.1:100:3)
at Re (react-dom.min.js?ver=17.0.1:113:271)
at Pj (react-dom.min.js?ver=17.0.1:233:55)
at di (react-dom.min.js?ver=17.0.1:168:305)
Alternatively if I remove the {…useBlockProps()} then the code is working fine again. That means I cannot use both of this two hooks at the same time. You can look at my code:
// WP dependencies
import { __ } from "@wordpress/i18n";
import apiFetch from "@wordpress/api-fetch";
import { addQueryArgs } from "@wordpress/url";
import { useBlockProps } from "@wordpress/block-editor";
import { useEffect } from "@wordpress/element";
import "./editor.scss";
export default function Edit({ attributes, setAttributes }) {
useEffect( () => {
apiFetch({
path: addQueryArgs(<code>wc/store/products/</code>, {
per_page: attributes.itemCount,
category: attributes.categoryID
}),
}).then((items) => {
setAttributes({
productItem: items,
});
});
}, [] );
if (!attributes.productItem) return "loading...";
return (
<div {...useBlockProps()}>
{attributes.productItem.map(item => {
return (
<p>{item.name}</p>
)
})}
</div>
);
}