React Native报undefined is not a function near '...icons.map...'错误如何解决

错误根因 #

React 组件接收到的第一个参数是整个props对象，你当前的写法直接把参数命名为icons，此时变量icons指向的是完整的props对象，而不是你传递的icons数组。对象本身没有map方法，因此调用icons.map时抛出异常。

修复方案 #

有两种常用修复方式：

• 方式1：解构props获取icons字段
  修改组件的参数声明，直接从props中解构出你传入的icons属性：

// 把参数用大括号包裹，解构出icons字段
const BottomTab = ({icons}) => {
  // 其余代码保持不变
}

• 方式2：通过props对象访问icons属性
  如果不解构，就先把参数命名为props，再通过属性访问拿到数组：

const BottomTab = (props) => {
const [activeTab, setActiveTab] = useState('HOME')

const Icon = ({icon}) => (
    <TouchableOpacity onPress={() => setActiveTab(icon.name)}>
        <Image source={{uri: icon.active}} style={styles.icon} />
    </TouchableOpacity>
)
return (
    <View>
        {/* 从props中取icons数组再调用map */}
        {props.icons.map((icon, index) => (
            <Icon key={index} icon={icon} />
        ))}
    </View>
)
}

额外注意事项 #

当前代码还有两个潜在问题需要修正：

1. 初始激活态不匹配：你给activeTab设置的初始值是全大写的'HOME'，但图标数组里的name属性是首字母大写的'Home'，后续判断激活状态时会匹配失败，建议统一命名规则，比如把初始值改成'Home'。
2. 未区分激活/未激活图标：当前Icon组件里固定使用icon.active的地址，不管标签是否激活都会展示激活态图标，建议增加判断逻辑：

const Icon = ({icon}) => (
    <TouchableOpacity onPress={() => setActiveTab(icon.name)}>
        <Image 
            source={{uri: activeTab === icon.name ? icon.active : icon.inactive}} 
            style={styles.icon} 
        />
    </TouchableOpacity>
)

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