I'm facing some issue while creating a custom wordpress gutenberg, could anyone please look into it and help me?

我在创建一个定制的WordPress Gutenberg时遇到了一些问题，有人能调查一下并帮助我吗？

In the below code what I want is once user have entered the articleId then and then only it should search for that articleId, but currently it is calling api for a single letter typed, that is not a better approach.

在下面的代码中，我想要的是一旦用户输入了文章ID，然后只有它应该搜索该文章ID，但目前它调用的是一个字母键入的API，这不是一个更好的方法。

export default function (blocks, components, data, compose) {
    const { registerBlockType } = blocks;
    const { TextControl, SelectControl } = components;
    const { withSelect } = data;

    const ArticleBlock = (props) => {
        const { attributes, setAttributes, articleExists } = props;
        const { articleId, style } = attributes;

        const styles = [
            { value: 'simple', label: 'Simple' },
            { value: 'thumbnail', label: 'Thumbnail' },
        ];

        return (
            <div>
                {/* Use a TextControl with a PanelBody for search results */}
                <TextControl
                    label="Article ID"
                    value={articleId}
                    onChange={(value) => setAttributes({ articleId: value })}
                />
                {articleId !== null && (
                    <p>{articleExists ? 'Article exists' : 'Article does not exist'}</p>
                )}
                <SelectControl
                    label="Style"
                    value={style}
                    options={styles}
                    onChange={(value) => setAttributes({ style: value })}
                />
                {/* Display the specified article based on the style */}
                {style === 'simple' && <p>Display Simple Style: Title Only</p>}
                {style === 'thumbnail' && <p>Display Thumbnail Style: Featured Image and Title</p>}
            </div>
        );
    };

    registerBlockType('cs/highlighted-article', {
        title: 'CS: Highlighted Article',
        icon: 'admin-post', // Change to your desired icon
        category: 'common',
        attributes: {
            articleId: {
                type: 'string',
                default: null,
            },
            style: {
                type: 'string',
                default: 'simple',
            }
        },
        edit: compose.compose(
            withSelect((select, props) => {
                const { articleId } = props.attributes;
                
                const postTypes = select('core').getPostTypes({ per_page: -1 });
                let articleExists = false;

                if (postTypes) {
                    // Loop through post types and check if the article exists in any of them
                    for (const postType of postTypes) {
                        const post = select('core').getEntityRecord('postType', postType.slug, articleId);
                        if (post) {
                            articleExists = true;
                            break;
                        }
                    }
                }

                return { articleExists };
            })
        )(ArticleBlock),
        save: ({ attributes }) => {
            const { articleId, style } = attributes;
    
            return (
                <>
                  <div data-cs-highlighted-article data-article-id={articleId} data-style={style}></div>
                </>
            );
        },
    });
};

I've also tried with button, but in that case post is undefined, here I'm not getting true on first click while the api call in network tab is saying 200, though after clicking several time it is working

我也尝试了使用按钮，但在这种情况下POST是未定义的，在这里我没有在第一次点击时实现，而网络选项卡中的API调用是200，尽管在多次点击之后它起作用了

export default function (blocks, components, data, compose) {
    const { registerBlockType } = blocks;
    const { TextControl, SelectControl, Button } = components;
    const { withSelect } = data;

    const ArticleBlock = (props) => {
        const { attributes, setAttributes, postTypes, select } = props;
        const { articleId, articleExists, articleFound, style } = attributes;

        const styles = [
            { value: 'simple', label: 'Simple' },
            { value: 'thumbnail', label: 'Thumbnail' },
        ];

        const checkArticleExists = async () => {
            if (postTypes) {
                for (const postType of postTypes) {
                    console.log(articleFound);
                    if (!articleFound) {
                        try {
                            const post = await select('core').getEntityRecord('postType', postType.slug, articleId);
                            console.log(post);
                            if (post) {
                                setAttributes({ articleExists: true, articleFound: true });
                                return;
                            }
                        } catch (error) {
                            console.error('Error fetching article:', error);
                        }
                    }
                }
            }
        };        

        return (
            <div>
                {/* Use a TextControl with a PanelBody for search results */}
                <TextControl
                    label="Article ID"
                    value={articleId}
                    onChange={(value) => setAttributes({ articleId: value })}
                />
                <Button 
                    text="Check Article Existence"
                    className="btn btn-primary btn-sm pb-2"
                    onClick={checkArticleExists}
                />
                {articleId !== null && (
                    <p>{articleExists ? 'Article exists' : 'Article does not exist'}</p>
                )}
                <SelectControl
                    label="Style"
                    value={style}
                    options={styles}
                    onChange={(value) => setAttributes({ style: value })}
                />
                {/* Display the specified article based on the style */}
                {style === 'simple' && <p>Display Simple Style: Title Only</p>}
                {style === 'thumbnail' && <p>Display Thumbnail Style: Featured Image and Title</p>}
            </div>
        );
    };

    registerBlockType('cs/highlighted-article', {
        title: 'CS: Highlighted Article',
        icon: 'admin-post', // Change to your desired icon
        category: 'common',
        attributes: {
            articleId: {
                type: 'string',
                default: null,
            },
            articleExists: {
                type: 'boolean',
                default: false,
            },
            articleFound: {
                type: 'boolean',
                default: false,
            },
            style: {
                type: 'string',
                default: 'simple',
            }
        },
        edit: compose.compose(
            withSelect((select, props) => {
                const postTypes = select('core').getPostTypes({ per_page: -1 });
                return { select, postTypes };
            })
        )(ArticleBlock),
        save: ({ attributes }) => {
            const { articleId, style } = attributes;
    
            return (
                <>
                  <div data-cs-highlighted-article data-article-id={articleId} data-style={style}></div>
                </>
            );
        },
    });
};

Thank you!

谢谢!