React Native 使用 useContext 更新调查问卷时报setEvent不是函数错误

• 核心错误是useContext的调用时机早于QuestionsProvider的渲染。你在Whathappened组件内部先执行了useContext(QuestionsContext)，才在return的JSX里包裹QuestionsProvider，此时useContext拿到的是QuestionsContext的初始化默认值，不是Provider里传递的包含setEvent的对象，自然调用setEvent就会报“不是函数”的错误。
• 第二个问题是Provider的放置位置错误：你把QuestionsProvider放在Whathappened组件内部，相当于每个Whathappened实例独占一个context状态，其他问卷组件根本拿不到这个实例的共享数据，完全达不到跨组件共享的目的。

1. 把QuestionsProvider移动到所有需要共享问卷数据的组件的共同父级，比如问卷流程的路由外层、整个问卷模块的根组件：

// 示例：父级组件中包裹所有问卷子页面
import { QuestionsProvider } from '@/shared/contexts/providers/QuestionsProvider';
import Whathappened from './Whathappened';
import Whatdidyouthink from './Whatdidyouthink';

export default function SurveyRoot() {
  return (
    <QuestionsProvider>
      {/* 所有问卷相关页面都放在Provider内部，比如你的路由组件 */}
      <Whathappened />
      <Whatdidyouthink />
    </QuestionsProvider>
  )
}

2. 修改Whathappened组件，删除内部的QuestionsProvider包裹：

// 去掉return里最外层的<QuestionsProvider>标签，直接返回KeyboardAwareScrollView即可
export default function Whathappened(props) {
  // ... 原有逻辑不变
  return (
    <KeyboardAwareScrollView contentContainerStyle={{minHeight:'100%'}}>
      {/* 原有Formik逻辑不变 */}
    </KeyboardAwareScrollView>
  )
}

3. （可选但建议）初始化QuestionsContext时添加默认值兜底，避免意外报错：

// @/shared/contexts文件中创建context的代码
import { createContext } from 'react';
export const QuestionsContext = createContext({
  event: undefined,
  setEvent: () => {} // 给setEvent加一个空函数的默认兜底
});

你当前代码中setEvent(values)之后马上打印event拿到的是更新前的旧值，这是React useState更新的异步特性导致的，属于正常现象，如果需要确认更新结果，可以通过Provider里的useEffect打印的日志查看，或者直接打印传入的values即可。

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