值不通过 React Context API 传递答案

【问题标题】：Value is not passed through the React Context API值不通过 React Context API 传递
【发布时间】：2019-02-24 19:12:55
【问题描述】：

我正在尝试使用 React Context API 重新编写我的应用程序，但遇到了下一个问题 - 我想通过 Provider 传递给 Consumer 的值没有传递。

初始状态：

let initialState = {
    ve: 'randomValue'
};

export default initialState;

提供者：

import React, {Component} from 'react';
import MyContext from './myContext';

import initialState from './initialState';

class MyProvider extends Component{
constructor(props) {
    super(props);
    this.state = initialState;
}

render() {
    return(
        <MyContext.Provider value={{
            state: this.state,
        }}>
            {this.props.children}
        </MyContext.Provider>
    )
    }
};

export default MyProvider;

消费者：

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

import MyContext from './Context/myContext';

export default class App extends Component {
  render() {
    return (
      <MyContext.Consumer>
        {context => (
          <View>
            <Text>
              {context}
            </Text>
          </View>
        )}
      </MyContext.Consumer>
    );
  }
}

我没有收到任何错误，但也没有 Context 值。

【问题讨论】：

App 组件是否呈现为 MyProvider 的子组件？

标签： reactjs react-native react-context

【解决方案1】：

您还需要在MyContext.Consumer 组件上方的某个位置使用Provider 组件。

示例

const initialState = {
  ve: "randomValue"
};
const MyContext = React.createContext();

class MyProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = initialState;
  }

  render() {
    return (
      <MyContext.Provider
        value={{
          state: this.state
        }}
      >
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <MyProvider>
        <MyContext.Consumer>
          {context => <div>{JSON.stringify(context)}</div>}
        </MyContext.Consumer>
      </MyProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：