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

Posted 2023-04-14

【中文标题】无法使用反应上下文在不同组件之间共享数据

【英文标题】：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 组件子？

不是两个都是独立的组件

【参考方案1】：

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

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

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

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

<MContext.Provider value=resultsArray >

 </MContext.Provider>

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