React Native调用icons.map触发TypeError报错排查

你碰到的TypeError: undefined is not an object (evaluating 'icons.map')错误本质非常直接：代码执行到icons.map()这一行时，组件接收到的icons属性值是undefined，不是预期的数组类型，自然不存在数组原型上的map方法，直接触发类型错误。

你写的<BottomTabs icons = {bottomTabIcons}/>传参语法本身没有问题，JSX解析时会正确把大括号里的bottomTabIcons变量值传给icons属性，错误基本来自以下几个高频场景：

• 作用域问题：bottomTabIcons定义在其他文件中，但你在使用<BottomTabs>的文件里没有写正确的import语句导入这个变量，未声明导入的变量在JS中值为undefined，最终传给组件的就是undefined。
• 变量初始化顺序问题：如果bottomTabIcons定义在同文件里，但位置在组件渲染逻辑之后（比如写在组件return语句的后面、组件函数的外部靠后位置），首次渲染执行时变量还没完成初始化，拿到的值也是undefined。
• 异步赋值问题：如果bottomTabIcons不是你贴出来的静态写死数组，是接口请求、异步读取资源拿到的结果，且你没有给这个变量设置初始值为空数组[]，首次渲染时异步逻辑还没执行完成，传给组件的同样是undefined。

• 先排查变量作用域和初始化顺序：确认在使用<BottomTabs>组件的位置，bottomTabIcons已经被正确导入、且在渲染执行前就已经完成初始化。
• 给props加兜底默认值，从根源避免这类渲染错误，直接在组件解构props时设置空数组默认值即可：

const BottomTabs = ({ icons = [] }) => {
    const [activeTab, setActiveTab]  = useState('Home')

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

    return (
        <View>
            { icons.map((icon, index) =>(
                <Icon key = {index} icon={icon}/>
            ))}
        </View>
    )
}

如果你的图标数组是异步获取的，这个默认空数组可以保证首次渲染时不会触发类型错误，等异步数据返回后组件会自动重渲染，展示正确的图标列表。

• 额外提个你现有代码的小遗漏：目前内部的Icon组件固定加载inactive状态的图片，后续可以加判断，当activeTab === icon.name时加载active状态的图片，实现选中态切换效果。

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