React Native Element type无效错误：请求排查HospitalInfo组件

在Android模拟器里运行React Native时碰到渲染错误，系统提示检查HospitalInfo组件的render方法，我可以提供数据结构JSON辅助排查。

组件代码：

import { View, Text, FlatList } from 'react-native'
import React from 'react'
import Colors from '../../../assets/Shared/Colors'
import  { Ionicons }  from '@expo/vector-icons';
import ActionButton from './ActionButton';
import PageHeader from '../Shared/PageHeader';
import SubHeading from '../Home/SubHeading';
import HorizontalLine from '../Shared/HorizontalLine';

export default function HospitalInfo( {hospital} ) {
    return hospital && (
        <View>
            <Text style={{
                fontSize: 23,
                fontFamily: 'appfont-semi'
            }}>{hospital.attributes.Name}</Text>

            <FlatList
                data={hospital.attributes?.category?.data}
                horizontal={true}
                renderItem={({ item }) => (
                    <Text style={{
                        marginRight: 10, color: Colors.GRAY
                    }}>{item.attributes.Name},</Text>
                )}
            />

           <HorizontalLine/>
            <View style={{
                display: 'flex', flexDirection: 'row',
                gap: 5, alignItems: 'center'
            }}>
                <Ionicons name="location" size={22} color={Colors.PRIMARY} />
                <Text style={{
                    fontSize: 16,
                    fontFamily: 'appfont',
                    color: Colors.GRAY
                }}>{hospital.attributes.Address}</Text>
            </View>

            <View style={{
                display: 'flex', flexDirection: 'row',
                gap: 5, alignItems: 'center',
                marginTop:6
            }}>
                <Ionicons name="time" size={22} color={Colors.PRIMARY} />
                <Text style={{
                    fontSize: 16,
                    fontFamily: 'appfont',
                    color: Colors.GRAY
                }}>Mon Sun | 11AM - 8 PM</Text>
            </View>

            <ActionButton/>

            <View style={{
                borderBottomWidth: 1,
                marginTop:15,
                borderColor: Colors.LIGHT_GRAY, margin: 5, marginBottom: 15
            }}></View>

            <SubHeading subHeadingTitle={'About'}/>
            <Text>{hospital.attributes?.Description}</Text>
        </View>
    )
}

排查方向和修复方案 #

• 属性访问未做空值处理：
  你只判断了hospital存在，但hospital.attributes可能是undefined，直接访问hospital.attributes.Name、hospital.attributes.Address会触发错误。改成带可选链的写法：

  {hospital.attributes?.Name}
  {hospital.attributes?.Address}
  

• FlatList数据源未兜底：
  hospital.attributes?.category?.data如果不存在，FlatList拿到的data是undefined，会导致渲染错误。给个默认空数组兜底：

  data={hospital.attributes?.category?.data || []}
  

• FlatList子项属性未做空判断：
  如果data里的item没有attributes属性，访问item.attributes.Name也会报错，加上可选链：

  {item.attributes?.Name}
  

• 自定义组件可能存在问题：
  HorizontalLine、ActionButton、SubHeading这些自定义组件如果内部有bug，也会导致当前组件报错。可以先把这些组件注释掉，看错误是否消失，逐步定位问题。

如果按上面改完还报错，把你的hospital数据结构JSON发出来，能更快定位问题。

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