我有一个Search 父组件和一个SideBar 子组件，我试图在SideBar 中获取上下文，但每次它都返回空。
我完全按照教程进行操作：https://itnext.io/manage-react-state-without-redux-a1d03403d360 但它从来没有奏效，有人知道我做错了什么吗？
这里是项目的代码框链接：https://codesandbox.io/s/vigilant-elion-3li7v
【问题讨论】：
标签： reactjs react-redux react-context
那篇文章是我写的。
解决您的具体问题：
当使用 HOC withStore 时，您将 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-store，该库已经打包、测试过，功能更多。
一个更好的解决方案是使用这个库：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/react-context-hook 的非挂钩版本？
您将商店作为道具传递，因此要访问它，您需要 this.props.store 在您的 SideBar 中。
不是this.state.store
【讨论】：
this.props.store，但是还是返回{}
store 一开始只有 3 种方法。您无法访问 Search 本地状态，只能访问存储状态。
Search 组件分离的提供程序，并在Search 组件上使用withStore。您很可能希望将共享状态移至store。
JSON.stringify时不包含函数
Search 组件的state 数据，例如this.props.store.get('something') 在SideBar 子组件中
围绕搜索和侧边栏创建一个包装 App 组件：
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 包装。
现在可以在 SideBar 中调用：
render() {
return (
<div>
{"Sidebar: this.state.store: ---> " +
JSON.stringify(this.props.store.get("showModal"))}
}
</div>
);
}
你会得到输出。
【讨论】：