无法使用反应上下文在不同组件之间共享数据答案

【问题标题】：Unable to share the data between different components using react Context无法使用反应上下文在不同组件之间共享数据
【发布时间】：2020-06-28 13:31:05
【问题描述】：

分别创建了类（ABC）和函数（XYZ）两个组件。两者都是独立的组件。在 ABC 组件中加载表数据并尝试使用 Context 将其传递给 XYZ 组件。我不知道究竟在哪里犯了错误。看代码..

在 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() 函数中

【问题讨论】：

是 XYZ 组件的 ABC 组件子？
不是两个都是独立的组件

标签： javascript reactjs react-context react-component

【解决方案1】：

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

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

通过这样做Component 及其所有子级都可以访问context 值。

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

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

 </MContext.Provider>

你没有用任何组件包裹Context.Provider。所以这行不通

【讨论】：