React Context总是返回EMPTY

Question

我有一个Search父组件和SideBar子组件，我试图在SideBar中获取上下文，但每次它都返回空。

我完全按照以下方式学习教程：https://itnext.io/manage-react-state-without-redux-a1d03403d360但它从未奏效，有人知道我做错了什么吗？

以下是该项目的codesandbox链接：https://codesandbox.io/s/vigilant-elion-3li7v

Answer 1

我写了那篇文章。

要解决您的特定问题：

当使用HOCwithStore时，您正在将道具store注入封装的组件：<WrappedComponent store={context}。道具store的值是一个包含3个函数的对象：get、set和remove。

因此，与其打印，不如使用它。例如this.props.store.get("currentAlbums")或this.props.store.set("currentAlbums", [album1, album2])。

此示例由您的代码派生：https://codesandbox.io/s/nameless-wood-ycps6

但是

不要重写文章代码，而是使用库：https://www.npmjs.com/package/@spyna/react存储，它已经打包、测试并具有更多功能。

更好的解决方案是使用此库：https://www.npmjs.com/package/react-context-hook.这是那篇文章的新版本
这是一个更新另一个组件内容的侧边栏示例：https://codesandbox.io/s/react-context-hook-sidebar-xxwkm

使用反应上下文API时要小心

使用React Context API来管理应用程序的全局状态会有一些性能问题，因为每次上下文更改时，每个子组件都会更新。所以，我不建议在大型项目中使用它。

图书馆https://www.npmjs.com/package/@spyna/react商店有这个问题。

图书馆https://www.npmjs.com/package/react-context-hook没有。

Answer 2

您将存储作为道具传递，因此要访问它，您需要SideBar中的this.props.store。

非this.state.store

Answer 3

围绕搜索和边栏创建一个包装应用程序组件：

const App = props => (
<div>
<Search />
<SideBar />
</div>
);
export default createStore(App);

现在，您可以使用set操作状态，并在子组件Search和Sidebar中获得可用的状态。

在搜索组件中，你可以有这样的东西：

componentDidMount() {
this.props.store.set("showModal", this.state.showModal);
}

还包装了withStore(Search(ofc。

在边栏中，您现在可以调用：

render() {
return (
<div>
{"Sidebar: this.state.store: ---> " +
JSON.stringify(this.props.store.get("showModal"))}
}
</div>
);
}

然后你就会得到输出。