React Native中MyContext.Provider渲染时不显示值的原因是什么？

你的代码存在几个关键问题，导致Context的值无法显示：

1. 缺少Context消费组件 #

你的MyContext.Provider包裹的是{this.props.children}，但App作为根组件，并没有任何子组件被传入，所以没有组件在读取并显示Context的值。你需要创建一个消费Context的组件，放在Provider内部。

2. State初始化错误 #

this.state = 1直接写在render方法里是错误的——每次组件渲染时都会重新赋值，而且类组件的State规范上应该是对象（如果要存单个值，也应该在构造函数或类属性中初始化）。

3. 无用的contextType声明 #

App组件是Context的提供者，不需要static contextType = MyContext，这个声明是给消费Context的组件用的，直接删掉即可。

修正后的代码示例 #

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export const MyContext = React.createContext();

// 创建一个消费Context的组件
class ContextConsumer extends Component {
  static contextType = MyContext;
  render() {
    return <Text>Context的值：{this.context}</Text>;
  }
}

export default class App extends Component {
  // 正确初始化state
  state = { value: 1 };

  render() {
    return (
      <View>
        <Text> Hello There </Text>
        <MyContext.Provider value={this.state.value}>
          {/* 放入消费组件 */}
          <ContextConsumer />
        </MyContext.Provider>
      </View>
    );
  }
};

或者你也可以用MyContext.Consumer的方式消费：

// 在App的render里替换ContextConsumer为：
<MyContext.Consumer>
  {value => <Text>Context的值：{value}</Text>}
</MyContext.Consumer>

这样修改后，界面就能显示Provider传递的Context值了。

内容的提问来源于stack exchange，提问作者N. Desai