React Native加载JSON数据后页面无显示 控制台报错null如何解决

问题产生原因 #

1. Context状态初始化不合理
   Restaurant Context的初始值设置为null，读取JSON数据的异步逻辑完成前，页面已经完成首次渲染，后续状态更新没有触发视图重渲染。
2. 列表组件未配置更新监听
   你大概率用了FlatList渲染数据，未设置extraData属性，FlatList无法检测到Context内数据的变化，就算数据加载完成也不会更新视图。
3. JSON读取逻辑存在时序问题
   你控制台打印的错误为null，说明异常捕获分支没有触发，但数据更新的逻辑可能在异步回调之外，导致状态没有被正确赋值。
4. Context Provider包裹范围错误
   如果Restaurant Context的Provider没有包裹到你的Restaurant Screen页面，页面拿到的永远是Context的默认空值，不会读取到你加载完成的JSON数据。

解决方法 #

1. 修正Context状态初始化与JSON读取逻辑 #

如果是本地静态JSON文件，直接用import导入，不需要写异步读取逻辑，避免时序问题：

// 直接导入本地JSON文件
import restaurantsData from './restaurants.json'

// Context中初始化状态
const [restaurants, setRestaurants] = useState(restaurantsData)
const [error, setError] = useState(null)

如果需要动态读取JSON，确保异步回调中正确更新状态：

const loadData = async () => {
  try {
    const res = await fetch('你的JSON文件路径')
    const data = await res.json()
    setRestaurants(data)
    setError(null)
  } catch (err) {
    setError(err.message)
    setRestaurants([])
  }
}

2. 给FlatList添加extraData属性 #

让FlatList可以监听到数据变化，触发重渲染：

<FlatList
  data={restaurants}
  extraData={restaurants} // 新增这行配置
  renderItem={({item}) => /* 你的列表项渲染逻辑 */}
  keyExtractor={item => item.id.toString()}
/>

3. 页面增加加载与异常判断 #

避免空数据渲染空白页面：

// Restaurant Screen页面顶部先做判断
if (error) return <Text>加载失败：{error}</Text>
if (!restaurants || restaurants.length === 0) return <ActivityIndicator size="large" style={{marginTop: 100}} />

// 再渲染正常的列表内容

4. 检查Context Provider的包裹范围 #

确保Provider包裹在路由组件的外层，所有子页面都能接收到Context的状态更新：

// 入口文件示例
<RestaurantProvider>
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Restaurants" component={RestaurantScreen} />
    </Stack.Navigator>
  </NavigationContainer>
</RestaurantProvider>

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