In the documentation you posted it says:
Don’t use useSelect this way when calling the selectors in the render
function because your component won’t re-render on a data change.
import { useSelect } from '@wordpress/data';
function Paste( { children } ) {
const { getSettings } = useSelect( 'my-shop' );
function onPaste() {
// Do something with the settings.
const settings = getSettings();
}
return <div onPaste={ onPaste }>{ children }</div>;
}
Which is basically how you used and that is why your component is re-rendering when there is a change.
You can use react hooks (useState, useEffect)to resolve this issue. See the code below. I have commented the code to explain the changes. (code is not tested)
import { useBlockProps, URLInput } from '@wordpress/block-editor';
import SingleImage from '../../components/singleImage.jsx';
import { useSelect } from '@wordpress/data';
const { useState, useEffect } = wp.element;
import './editor.scss';
export default function Edit({ attributes, setAttributes }) {
// Prepare state
const [post, setPost] = useState();
// useSelect with a callback, notice the third paramter
const record = useSelect(
(select) => {
return select('core').getEntityRecords(
'postType',
'virtualne-izlozbe',
post.id
);
},
// This is a dependency array, everytime the state of
// "post" changes, useSelect callback will be called.
[post]
);
// Perfom actions on state change
useEffect(() => {
// record value change, do someting
if (record) {
console.log(record.featured_media);
} else {
console.log('empty');
}
// Dependency array, every time record changes the useEffect callback
// will be called
}, [record]);
const urlInputSetter = (url, urlPost) => {
if (urlPost && !attributes.imgID) {
if (urlPost.type === 'virtualne-izlozbe') {
// Change state so the useSelect callback will be triggered
setPost(urlPost);
}
}
setAttributes({ link: url, postTitle: post && post.title });
};
return (
<div {...useBlockProps()}>
<URLInput
value={attributes.link}
onChange={urlInputSetter}
label="Link na objavu"
className="post-link"
/>
{attributes.postTitle && (
<div className="post-title">
Slika vodi na objavu {attributes.postTitle}
</div>
)}
<SingleImage
imgID={attributes.imgID}
imgURL={attributes.imgURL}
alt="Slika koja vodi na objavu"
setImgIdAndUrl={(imgID, imgURL) =>
setAttributes({ imgID, imgURL })
}
title="Izaberi sliku"
help="Slika koja vodi na objavu"
/>
</div>
);
}