能否在Gutenberg块edit函数返回区直接用数组变量而非存入属性？

你可以通过React的状态钩子处理异步获取的API数据，完全不需要把数据存入块的属性里，具体实现思路如下：

• 用useState定义组件内部状态，存储API返回的选项数据和加载状态
• 用useEffect在组件挂载时发起REST API请求，拿到数据后格式化并更新状态
• 基于状态值渲染SelectControl，加载状态下显示提示文本，避免数据未就绪时的未定义错误

示例代码：

import { __ } from '@wordpress/i18n';
import { SelectControl } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';

const Edit = () => {
    // 初始化状态：选项数组和加载状态
    const [selectOptions, setSelectOptions] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchOptions = async () => {
            try {
                // 调用WordPress REST API，替换成你的目标接口路径
                const apiData = await apiFetch({ path: '/wp/v2/categories' });
                // 格式化为SelectControl需要的结构：[{ label: '', value: '' }]
                const formatted = apiData.map(item => ({
                    label: item.name,
                    value: item.id.toString()
                }));
                setSelectOptions(formatted);
            } catch (err) {
                console.error('API请求失败:', err);
            } finally {
                setLoading(false);
            }
        };

        fetchOptions();
    }, []); // 空依赖确保只执行一次

    return (
        <div className="your-block-edit">
            {loading ? (
                <p>{__('加载选项中...', 'your-plugin-domain')}</p>
            ) : (
                <SelectControl
                    label={__('选择分类', 'your-plugin-domain')}
                    value="" // 这里可以绑定块的属性（比如attributes.selectedCat），仅存储选中值而非所有选项
                    options={selectOptions}
                    onChange={(selectedValue) => {
                        // 这里处理选中后的逻辑，比如更新块的属性
                        // props.setAttributes({ selectedCat: selectedValue });
                    }}
                />
            )}
        </div>
    );
};

export default Edit;

为什么这个方案可行？ #

组件首次渲染时，selectOptions初始为空数组，loading为true，此时显示加载提示不会触发未定义错误。当API请求完成后，状态更新会触发组件重新渲染，此时selectOptions已经有了格式化后的有效数据，SelectControl就能正常渲染。

这种方式把选项数据放在组件内部状态里，不需要存入块的attributes，仅将用户选中的值（如果需要持久化）存入属性即可，完全符合你的需求。

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