React Native中如何从Context向App.js传递函数？报错排查

报错原因 #

1. 未用Provider包裹组件：App组件没有被ActivitiesContext的Provider包裹，导致useContext(ActivitiesContext)返回undefined，解构state和getActivity时触发报错。
2. CreateDataContext参数错误：调用createDataContext时未传入要求的reducer、defaultValue参数，导致内部useReducer初始化失败，action处理逻辑异常。
3. getActivity函数写法不符合要求：CreateDataContext期望action函数接收dispatch并返回可执行函数，当前写法直接执行console.log，导致绑定后的函数为undefined。

Provider的作用与正确用法 #

Provider是React Context的核心组件，用来向下传递Context的状态和方法。所有需要访问Context数据的组件，必须被Provider的children包含。简单说，Provider就像一个数据容器，把内部的所有组件都纳入它的作用域，让这些组件能直接拿到共享的数据和方法。

代码修正 #

1. 修正ActivitiesContext.js的参数与action写法 #

补充createDataContext要求的参数，同时调整getActivity的结构以符合Context的action规范：

import createDataContext from "./CreateDataContext";

// 空reducer，暂时不处理状态更新（后续扩展state时可修改）
const activitiesReducer = (state, action) => state;

// 修正getActivity：接收dispatch，返回可执行的函数
const getActivity = () => () => {
  console.log("hi");
};

export const { Provider, Context } = createDataContext(
  activitiesReducer, // 第一个参数：reducer函数
  { getActivity },   // 第二个参数：所有action方法
  {}                 // 第三个参数：初始state
);

2. 在App.js中用Provider包裹组件 #

只有被Provider包裹的组件才能访问Context数据，因此需要将App的核心内容放在Provider内部：

import React from 'react'
import { StatusBar } from 'expo-status-bar';
import { useEffect, useContext } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Context as ActivitiesContext, Provider } from "./context/ActivitiesContext";

// 提取核心内容到单独组件
const AppContent = () => {
  const { getActivity } = useContext(ActivitiesContext);

  useEffect(() => {
    getActivity(); // 现在可正常调用，控制台会打印"hi"
  }, []);

  return (
    <View style={styles.container}>
      <Text>Open App.js to start working on your file</Text>
      <StatusBar style="auto" />
    </View>
  )
}

// 用Provider包裹核心组件
const App = () => {
  return (
    <Provider>
      <AppContent />
    </Provider>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App

3. 逻辑验证 #

修改后运行代码，控制台会正常打印"hi"，原TypeError报错也会消失。后续如果需要扩展状态管理，只需修改activitiesReducer和对应的action逻辑即可。

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