react动态监听state的值(React Context)

1.在utils建立一个新文件用来存储 globalContext.js

import React from 'react';
const GlobalContext = React.createContext();
export default GlobalContext;

2.在根组件APP.js中使用

import GlobalContext from './utils/globalContext';

<GlobalContext.Provider       
value={{ 
// 全局上下文组件（参考 react 生产者组件和消费者组件）       
 global: { ...this.state },        
 changeGlobalState: (state) => //这个函数用来写需要动态改变的值
 {  this.setState({ ...state }) },      
   </GlobalContext.Provider>

3.在需要传值的页面(传过去的那个页面)写更新函数

import GlobalContext from "../../../utils/globalContext";

 const context = useContext(GlobalContext);//这个必须写
 context.changeGlobalState({     
  RegionId:selectedOptions[len].key  
    }) //全局存RegionId,可以在任何页面取到

4.在需要动态改变state的页面监听Region的变化

 static contextType = GlobalContext//必写
componentWillReceiveProps(nextProps,nextContext){    
console.log(nextContext);   //所有的值都可以在这里面取
 const id=nextContext.global.RegionId   
  this.setState({     
RegionId:nextContext.global.RegionId   
 })