我正在使用上下文 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.....
}
当我解构上面已经定义的第二个状态变量时,这段代码显然不起作用。
这样做的正确方法是什么?
答案 0 :(得分:1)
您刚刚遇到了名称冲突,它与 React 无关,请尝试重命名其中一个变量:
const { state } = useContext(PlaybackContext);
const { state: state2 } = useContext(EpisodeContext) // use state2 now