React Native中Object.keys打印正常但App内显示undefined如何解决

问题根因 #

你遇到的报错本质是调用Object.keys()时传入了undefined值。因为Firebase Realtime Database的数据是异步拉取的，组件首次渲染时postDetail还没拿到后端返回的完整数据，此时postDetail.sizes为undefined，调用Object.keys(undefined)就会抛出你遇到的报错。

修正方案 #

你可以通过可选链判断+兜底的方式解决，修正后的代码如下：

<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
    {
        postDetail?.sizes ? Object.keys(postDetail.sizes).map((item) => {
            // 给列表项添加唯一key，避免React Native抛出列表渲染警告
            return <View key={item}>
                <Text style={{ color: 'black', fontWeight: 'normal' }}>{item}</Text>
            </View>
        }) : null
    }
</View>

如果你的React Native版本不支持可选链语法，可以把判断条件替换为postDetail && postDetail.sizes即可。

额外优化建议 #

• 如果你用useState存储postDetail，可以给初始值提前设置sizes的兜底空对象：const [postDetail, setPostDetail] = useState({ sizes: {} })，同样可以避免首次渲染报错。
• 如果需要展示加载状态，可以把上面代码里的兜底null替换为加载提示组件，比如<Text>加载中...</Text>。

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