「React Native」子组件Render中props为空报错问题

Posted 2023-05-04

参考技术A 子组件传递 props 为空，导致在 render 中取值报错问题

问题描述

当子组件依赖父组件中的网络请求返回的数据渲染时，在网络返回成功之前，父组件第一次 render 时，传递到子组件的 props 为空，会导致子组件渲染失败报错。

解决方案

在父组件中判断网络是否返回成功

如果还没有返回，则在父组件渲染界面时用一个空 View 或者 null 占位，

或者在子组件的 props 中取值时进行判空操作

React-native：组件未呈现

【中文标题】React-native：组件未呈现

【英文标题】：React-native: Component not rendering

【发布时间】：2017-11-11 20:12:19

【问题描述】：

我有一个地图组件，当我调用以下方法时会呈现：

render() 
    return (
      <MapComponents />
    )
  

但是，我想从 <View> 中创建调用 <MapComponents />，如下所示：

render() 
    return (
      <View>
      <MapComponents />
      </View>
    )
  

此时，我得到一个空白屏幕。任何想法为什么会这样？

【参考方案1】：

您需要将flex: 1 添加到父级，以便它占用所有可用空间：

render() 
  return (
    <View style= flex: 1 >
      <MapComponents />
    </View>
  )

【讨论】：

非常感谢您的修复。你介意解释一下为什么需要这样做吗（我认为组件不需要依赖这个特殊的样式值才能被看到）？