使用React开发WordPress Block遇v.map is not a function错误求助

问题场景 #

用React开发WordPress Block时，想通过useEffect在组件加载时从Web API拉取数据填充SelectControl的选项，但一直触发TypeError: v.map is not a function错误，自己没写map函数，找不到问题根源。

相关代码（已移除API调用） #

Edit组件部分：

function Edit(props) {

const [selectOptions, setSelectOptions] = useState('')

useEffect(() => {

    let options = `
        <option value=''>Please select...</option>
        <option value='1'>Item 1</option>
        <option value='2'>Item 2</option>
    `
    setSelectOptions(options)

}, []);

const blockProps = useBlockProps({
    className: "ac-availability-checker-edit-block"
})

// ...其他代码

SelectControl使用部分：

<FlexBlock className="ac-attribute">
    <SelectControl
        label="Background colour"
        value={props.attributes.bgColor}
        options={selectOptions}
        onChange={(value) => updateBgColor(value)}
    />
</FlexBlock>

依赖版本 #

"@wordpress/scripts": "^24.6.0"

完整错误信息 #

react-dom.min.js?ver=17.0.1:9 TypeError: v.map is not a function
at components.min.js?ver=4b876f1ff2e5c93b8fb1:38:244607
at ct (react-dom.min.js?ver=17.0.1:9:43430)
at It (react-dom.min.js?ver=17.0.1:9:48875)
at os (react-dom.min.js?ver=17.0.1:9:113180)
at Ur (react-dom.min.js?ver=17.0.1:9:77643)
at Ir (react-dom.min.js?ver=17.0.1:9:77571)
at Dr (react-dom.min.js?ver=17.0.1:9:77434)
at Pr (react-dom.min.js?ver=17.0.1:9:74429)
at react-dom.min.js?ver=17.0.1:9:30173
at unstable_runWithPriority (react.min.js?ver=17.0.1:9:7431)

问题根源 #

WordPress的SelectControl组件内部会调用map遍历传入的options属性生成选项，但你传入的是HTML字符串，字符串没有map方法，因此触发错误。SelectControl要求options必须是包含label和value字段的对象数组，而非HTML片段。

解决方案 #

把selectOptions的类型改成对象数组，初始化用空数组，useEffect里设置符合格式的选项：

修改后的Edit组件代码 #

function Edit(props) {
    // 初始化空数组，替代原来的空字符串
    const [selectOptions, setSelectOptions] = useState([]);

    useEffect(() => {
        // 改成{label, value}结构的对象数组
        let options = [
            { label: 'Please select...', value: '' },
            { label: 'Item 1', value: '1' },
            { label: 'Item 2', value: '2' }
        ];
        setSelectOptions(options);
    }, []);

    const blockProps = useBlockProps({
        className: "ac-availability-checker-edit-block"
    });

    // ...其他代码
}

从Web API拉取数据的适配 #

如果是从API获取数据，需要把返回的数据转换成相同结构，示例：

useEffect(() => {
    fetch('你的API地址')
        .then(res => res.json())
        .then(data => {
            // 假设API返回项包含name和id字段，转换为{label, value}结构
            const options = data.map(item => ({
                label: item.name,
                value: item.id.toString() // 确保value为字符串，符合WP Block属性规范
            }));
            // 追加默认选项
            options.unshift({ label: 'Please select...', value: '' });
            setSelectOptions(options);
        })
        .catch(err => console.error('加载选项失败:', err));
}, []);

验证 #

修改后SelectControl的options属性为合法数组，组件内部可正常调用map生成选项，报错将消失。

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