时间戳

首页 > 解决方案 > 如何在本机反应中从多个上下文访问状态？

reactjs - 如何在本机反应中从多个上下文访问状态？

问题描述

我正在使用上下文 API 在我的应用程序中的许多组件之间共享状态。我有几个不同的上下文文件，我将它们作为提供程序包装在我的根级组件周围。我很好奇如何在同一个功能组件中使用多个上下文挂钩。见下文：

import { Context as EpisodeContext } from "../context/EpisodeContext";
import { Context as PlaybackContext } from "../context/PlaybackContext";

const EpisodeDetailsScreen = ({ navigation }) => {
  const { state } = useContext(PlaybackContext);
  const { state } = useContext(EpisodeContext)

....omitted for brevity.....
}

当我解构上面已经定义的第二个状态变量时，这段代码显然不起作用。

这样做的正确方法是什么？

标签： reactjsreact-native

解决方案

您刚刚遇到名称冲突，它与 React 无关，请尝试重命名其中一个变量：

const { state } = useContext(PlaybackContext);
const { state: state2 } = useContext(EpisodeContext) // use state2 now

推荐阅读