React中如何正确为Select组件添加MenuItem？

问题根源 #

你的switchType函数存在核心问题：每个case中调用map生成了MenuItem数组，但没有将这个数组返回，而是直接执行break跳出分支，最终函数走到末尾抛出错误，等于没有给Select传递有效的选项节点。这就是为什么静态写MenuItem正常，动态生成却不显示的原因。

修复方案 #

只需要在每个case中，直接return map操作的结果即可（map返回的数组本身就是合法的ReactNode集合），不需要额外创建数组再push（当然那种方式也可行，但没必要）。

修正后的switchType代码：

function switchType<T extends LoaderSelectorTypes>(data: T): ReactNode {
    switch (interfaceMatcher(data)) {
        case InterfaceMatcher.ProviderArray: {
            return (data as MapProvider[]).map(provider => {
                return <MenuItem key={provider.name} value={provider.name}>{provider.name}</MenuItem>
            });
        }
        case InterfaceMatcher.MapTypeArray: {
            return (data as MapType[]).map(type => {
                return <MenuItem key={type.id} value={type.id}>{type.name}</MenuItem>
            });
        }
        case InterfaceMatcher.MapArray: {
            return (data as Map[]).map(map => {
                return <MenuItem key={map.id} value={map.id}>{map.name}</MenuItem>
            });
        }
        case InterfaceMatcher.ZoomArray: {
            return (data as ZoomLevelRatioSize[]).map(zoom => {
                return <MenuItem key={zoom.width} value={zoom.width}></MenuItem>
            });
        }
        default:
            throw new Error("No valid data type provided");
    }
}

关键说明 #

• React允许在JSX中直接渲染数组类型的ReactNode，所以map返回的MenuItem数组可以直接作为Select的子元素。
• 原代码中每个case里的map结果没有被返回，导致函数最终抛出错误，Select拿到的是错误而非有效节点，自然没有选项。
• 你更新的代码中通过数组收集再return是可行的，但直接return map结果更简洁高效。

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