React Native结合Context API与react-navigation时context为undefined如何解决

问题根因 #

你遇到的报错由两个核心错误导致：

1. GlobalState.js 内字段命名不统一，导致上下文返回值不存在
2. App.js 内 Context 消费位置错误，组件本身不在 Provider 作用域内

具体修正步骤 #

1. 修正GlobalState.js的字段错误 #

你在GlobalState的state中定义的是setups数组，但修改状态和取值时误用了不存在的tasks字段，直接导致上下文返回值为undefined。修正后代码如下：

import React from 'react';
import Context from './Context';
export default class GlobalState extends React.Component{
    state = {
        setups: [],
    }

    addNewSetup = (setup) => {
        const list = [...this.state.setups, setup];
        // 修正：state里没有tasks字段，存到setups中
        this.setState({setups: list});
    };
    
    render(){
        return (
            <Context.Provider
                value={{
                    // 修正：从state.setups取值，不是不存在的state.tasks
                    setups: this.state.setups,
                    addNewSetup: this.addNewSetup,
                }}
            >
                {this.props.children}
            </Context.Provider>
        );
    }
}

2. 修正Context的作用域问题 #

你当前是在App组件的render方法内部包裹GlobalState Provider，也就是说App组件本身是在Provider的外层，你在App里声明static contextType = Context根本拿不到Provider内的上下文值，需要把Provider移到App组件的外层：

方式一：修改入口文件（推荐）

找到你的项目入口文件（通常是index.js），用GlobalState包裹App组件：

import { AppRegistry } from 'react-native';
import App from './App';
import GlobalState from './src/GlobalUtils/GlobalState';
import { name as appName } from './app.json';

// 用GlobalState包裹整个App
const Root = () => (
  <GlobalState>
    <App />
  </GlobalState>
);

AppRegistry.registerComponent(appName, () => Root);

之后删掉App.js render方法里的GlobalState包裹标签即可，此时App组件已经在Provider作用域内，可以正常获取上下文值。

3. 可选优化：移除不必要的initialParams传参 #

initialParams仅会在组件初始化时赋值一次，后续Context更新不会同步参数。你完全不需要通过导航参数传递Context数据，所有Tab页面直接引入Context，声明static contextType = Context即可直接获取上下文数据，更方便后续数据更新同步。

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