React动态下拉框渲染问题求助：无法显示多个option选项

你的代码只渲染单个option的核心原因是每次循环都覆盖了存储选项的变量值，没有把所有数据下的labels选项累加起来，再加上一些语法和变量定义的小问题，导致最终只保留了最后一组数据生成的option。

问题分析 #

1. 变量初始化错误：你把存储选项的selectContent定义成了对象{}，但它应该是用来存储多个<option>的数组[]。
2. 循环覆盖而非累加：在result.data.results.map里，每次满足条件时直接selectContent = items.data.labels.results.map(...)，这会把之前的内容完全覆盖，最终只保留最后一次循环的结果。
3. 多余的导入：你导入了setState但根本没用到，属于冗余代码。
4. useEffect语法错误：原代码的useEffect结尾缺少依赖数组，必须补充（这里不需要依赖，所以用空数组[]）。
5. 不必要的map使用：result.data.results.map不需要返回值，用forEach或flatMap更合适。

修正后的代码 #

import React, { useEffect, useState } from "react";

const SelectBoxWrapper = () => {
    const [thisdata, setData] = useState([]);

    useEffect(() => {
        async function selectBoxHandler() {
            const res = await fetch(`api-call`);
            const result = await res.json();
            
            // 初始化数组收集所有选项
            const allOptions = [];
            result.data.results.forEach(items => {
                if (items.data.labels.results.length) {
                    const options = items.data.labels.results.map(itemresults => (
                        <option key={itemresults.id} value={itemresults.name}>
                            {itemresults.label}
                        </option>
                    ));
                    // 追加当前组的选项到总数组
                    allOptions.push(...options);
                }
            });
            
            setData(allOptions);
        }

        selectBoxHandler();
    }, []); // 空数组确保组件挂载时仅执行一次

    return (
        <div>
            <select>
                {thisdata}
            </select>
        </div>
    );
};

export default SelectBoxWrapper;

更简洁的写法（用flatMap） #

如果想简化代码，可以用flatMap直接扁平化收集所有符合条件的选项：

import React, { useEffect, useState } from "react";

const SelectBoxWrapper = () => {
    const [thisdata, setData] = useState([]);

    useEffect(() => {
        async function selectBoxHandler() {
            const res = await fetch(`api-call`);
            const result = await res.json();
            
            const allOptions = result.data.results.flatMap(items => {
                // 有结果则返回生成的option数组，否则返回空数组
                return items.data.labels.results.length 
                    ? items.data.labels.results.map(itemresults => (
                        <option key={itemresults.id} value={itemresults.name}>
                            {itemresults.label}
                        </option>
                    ))
                    : [];
            });
            
            setData(allOptions);
        }

        selectBoxHandler();
    }, []);

    return (
        <div>
            <select>
                {thisdata}
            </select>
        </div>
    );
};

export default SelectBoxWrapper;

关键修改说明 #

• 把存储选项的变量改成数组，通过push(...options)或flatMap累加所有选项，避免覆盖。
• 移除无用的setState导入，修复useEffect的语法错误。
• 组件名改为首字母大写（遵循React组件命名规范）。

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