迭代 Map 的值以呈现所有图标组件但不起作用但是呈现一个图标有效

Question

我正在开发react-native项目。

我有一个函数可以将图标元数据设置为 Map :

export function getIconsMetadata() {
   // a map of icons' metadata
   const iconsMetadata = new Map();
   ...
   // code to set icon metadata to the map
   iconsMetadata.set("foo", "Foo");
   iconsMetadata.set("bar", "Bar");
    ...
   return iconsMetadata;
}

还有一个函数return是基于图标类型的实际图标组件（即iconsMetadata的值保存图标类型）：

export function getMyIcon(iconType) {
  switch (iconType) {
    case 'Foo':
      return <Foo />;
    case 'Bar':
      return <Bar />;
    ...
}

在我的屏幕上，我有一个功能可以通过迭代上述图标元数据的值来显示图标组件 Map，并尝试呈现每个图标组件：

export const MyScreen() => {
    const showIcons = () => {
      [...getIconsMetadata().values()].map((iconType, index) => {
    
        const iconComponent = getMyIcon(iconType);
        return <View key={index}>
                 {iconComponent}
               </View>;
    
          });
    };

    return (
      <View style={styles.container}>
          {/*I call the showIcons function here to render icons*/}
          {showIcons()}
      </View>
   )

}

问题是屏幕上没有显示图标。

但是如果我直接 return 一个图标组件在我的屏幕上：

export const MyScreen = () => {
    ...
    const showOneIcon = () => {
        return <View>
                     <Foo />
                   </View>;
        
              });
    }
    
    return (
          <View style={styles.container}>
              {/*I show one icon*/}
              {showOneIcon()}
          </View>
       )
}

<Foo />图标组件在屏幕上渲染成功。

那么，为什么迭代地图以显示所有图标不起作用？

Answer 1

问题是您没有 return 从 showIcons 中获取任何内容。要么从那里删除 { }

const showIcons = () =>
  [...getIconsMetadata().values()].map((iconType, index) => {
    const iconComponent = getMyIcon(iconType);
    return <View key={index}>{iconComponent}</View>;
  });

或在[...getIconsMetadata().values()].map

前加上return

const showIcons = () => {
  return [...getIconsMetadata().values()].map((iconType, index) => {
    const iconComponent = getMyIcon(iconType);
    return <View key={index}>{iconComponent}</View>;
  });
};

迭代 Map 的值以呈现所有图标组件但不起作用但是呈现一个图标有效

Iterate over values of Map to render all icon components but don't work however render one icon works

react-native

react-native-android

react-native-ios