无法使用react Context在不同组件之间共享数据

Question

分别创建了两个组件，例如class（ABC）和function（XYZ）。两者都是独立的组件。将表格数据加载到ABC组件中，并尝试使用上下文将其传递给XYZ组件。我不知道在哪里犯错。参见代码。

in ABC.js内部

//excluding imports
export const MContext = React.createContext();
export default class ABC extends Component {
. //inside componentDidMount(){} loading resultsArray
.
.
.
handleClick(){
        this.showGrid = true;
}
 render() {
        return (
            <div>
                <MContext.Provider value={{resultsArray}} >

                </MContext.Provider>
.
.
.
<div>
   <button  onClick = {this.handleClick}>Submit</button>
   { this.state.showGrid ? <XYZ/> : null }
 </div>
</div>
}

和内部XYZ.js

const rows = [];
export default function XYZ() {

    <div>
        <Mcontext.Consumer>
            {(context) => (
                rows = context.value
            )}
        </Mcontext.Consumer>
    </div>
.
.
.
}

但是在这里，我无法将resultsArray []转移到rows []中，而是得到一个异常：

期望分配或函数调用，而是看到一个表达式

在XYZ.js中，将获得任何线索。

注意：<div><Mcontext.Consumer>...位于render（）函数内部

Answer 1

react中的[context api仅用于将数据从父组件传递到子组件。这主要是为了避免将props传递到树的多个级别。

   <MContext.Provider value={value} >
            <Component/>
    </MContext.Provider>

通过执行此Component及其所有子级都可以访问context值。

在您的情况下，上下文不能用于在独立组件之间共享数据。在这种情况下，您需要使状态恢复活力。在这里

<MContext.Provider value={{resultsArray}} >

 </MContext.Provider>

您没有用任何组件包装Context.Provider。这样就行不通了