WordPress Gutenberg块ComboboxControl数据加载渲染问题求助

问题情况 #

• 开发Gutenberg块时，通过接口获取文章数据填充ComboboxControl供用户选择。
• 保存文章重新加载页面后，已保存的选中值因列表数据加载滞后无法匹配，导致Combobox显示为空；点击下拉框再点击外部后，选中值才正常显示。
• 为避免API被无限调用，把apiFetch请求放在了Edit函数外部，但不确定这是不是最佳实践，也不清楚怎么正确使用useEffect这类Hook，需要先完成数据获取，再渲染带全量选项的ComboboxControl。

原代码 #

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import apiFetch from '@wordpress/api-fetch';
import { ComboboxControl, SelectControl } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';
import './editor.scss';

var options = [];
 
apiFetch( { path: '/wp/v2/posts/?per_page=-1' } ).then( ( posts ) => {
    console.log( posts );
    if ( posts.length ) {
        posts.forEach( ( post ) => {
            options.push( { value: post.id, label: post.title.rendered } );
        } );
    }
}, options );


export default function Edit( { attributes, setAttributes } ) {
    const blockProps = useBlockProps();
 
    const [filteredOptions, setFilteredOptions] = useState( options );
 
    const updateGroupId = ( val ) => {
        setAttributes( { GroupId: parseInt( val ) } );
    }
 

    return (
        <div {...blockProps}>
            <ComboboxControl
                label="Group"
                value={attributes.GroupId}
                onChange={updateGroupId}
                options={filteredOptions}
                onFilterValueChange={( inputValue ) =>
                    setFilteredOptions(
                        options.filter( ( option ) =>
                            option.label
                                .toLowerCase()
                                .indexOf( inputValue.toLowerCase() ) >= 0
                        )
                    )
                }
            />
        </div>
    );
}

问题根源 #

1. 全局变量options在组件初始化时是空数组，filteredOptions初始值也为空，导致已保存的GroupId找不到对应选项，显示为空。
2. API请求放在组件外部，组件无法感知options的更新，必须手动触发重渲染才会加载新选项。
3. 没有用React状态管理异步数据，也没利用useEffect处理API请求这类副作用。

优化后的代码 #

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import apiFetch from '@wordpress/api-fetch';
import { ComboboxControl } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';
import './editor.scss';

export default function Edit( { attributes, setAttributes } ) {
    const blockProps = useBlockProps();
    // 用组件状态管理选项列表，初始为空
    const [options, setOptions] = useState( [] );
    const [filteredOptions, setFilteredOptions] = useState( [] );
    const [isLoading, setIsLoading] = useState( true );

    // 用useEffect执行API请求，空依赖确保只在组件挂载时执行一次
    useEffect( () => {
        const fetchPosts = async () => {
            try {
                const posts = await apiFetch( { path: '/wp/v2/posts/?per_page=-1' } );
                // 格式化获取到的文章数据为Combobox需要的结构
                const formattedOptions = posts.map( post => ( {
                    value: post.id,
                    label: post.title.rendered
                } ) );
                setOptions( formattedOptions );
                // 初始加载时直接设置全量选项
                setFilteredOptions( formattedOptions );
            } catch ( error ) {
                console.error( '获取文章数据失败:', error );
            } finally {
                setIsLoading( false );
            }
        };

        fetchPosts();
    }, [] );

    const updateGroupId = ( val ) => {
        setAttributes( { GroupId: parseInt( val ) } );
    };

    // 加载状态下显示占位，避免空组件
    if ( isLoading ) {
        return <div {...blockProps}>加载中...</div>;
    }

    return (
        <div {...blockProps}>
            <ComboboxControl
                label="Group"
                value={attributes.GroupId}
                onChange={updateGroupId}
                options={filteredOptions}
                onFilterValueChange={( inputValue ) =>
                    setFilteredOptions(
                        options.filter( option =>
                            // 用includes替代indexOf，逻辑更清晰
                            option.label.toLowerCase().includes( inputValue.toLowerCase() )
                        )
                    )
                }
            />
        </div>
    );
}

核心优化说明 #

• 状态化管理数据：把全局options改成组件内部状态，数据更新时自动触发组件重渲染，确保选项列表及时更新。
• 正确使用useEffect：空依赖数组保证API请求只执行一次，既避免无限调用，又符合React副作用处理规范。
• 加载状态处理：数据未加载完成时显示占位，提升用户体验，同时避免渲染无选项的Combobox导致选中值匹配失败。
• 初始选项赋值：数据加载完成后直接把全量选项赋值给filteredOptions，确保组件初始化时选项列表完整，已保存的GroupId能直接匹配到对应选项。
• 错误捕获：添加try/catch处理API请求异常，方便调试排查问题。

内容的提问来源于stack exchange，提问作者xOTiiX