自定义钩子的状态不会在所有组件中更新吗？
自定义钩子的状态不会在所有组件中更新吗？
提问于 2021-05-19 08:02:57
import { useState } from 'react';
export default function usePrivacyMode() {
const [isPrivacyOn, setIsPrivacyOn] = useState(false);
return {
isPrivacyOn,
setIsPrivacyOn
};
}这是我定制的钩子。我在PrivacyIcons组件中设置状态，然后使用isPrivacyOn根据值显示/隐藏表中的值。但是在一个不同的组件中，isPrivacyOn不会改变，它只在PrivacyIcons中改变？为什么我不能在一个组件中更改它，然后在所有组件中使用该值？谢谢。
回答 1
Stack Overflow用户
发布于 2021-08-04 05:06:05
状态并不意味着在组件之间共享。您正在寻找useContext。这允许您在组件之间共享函数和状态。React在官方文档中有一个关于如何做到这一点的很好的教程：https://reactjs.org/docs/hooks-reference.html#usecontext
对于您的特定示例，它将如下所示：
你的App.js
import { useState } from 'react';
export const PrivacyContext = createContext([]);
const App = (props) => {
const [isPrivacyOn, setIsPrivacyOn] = useState(false);
return (
<PrivacyContext.Provider value={[isPrivacyOn, setIsPrivacyOn]}>
<ComponentUsingPrivacyContext />
{props.children}
</PrivacyContext.Provider>
);
};
export default App;请记住，任何想要访问上下文组件都必须是PrivacyContext的子级
任何想要使用PrivacyContext的组件：
import React, { useContext } from "react";
import {PrivacyContext} from "...your route";
const ComponentUsingPrivacyContext = (props) => {
const [isPrivacyOn, setIsPrivacyOn] = useContext(PageContext);
return (
<button onclick={setIsPrivacyOn}>
Turn Privacy On
</button>
<span>Privacy is: {isPrivacyOn}</span>
);
};
export default ComponentUsingPrivacyContext;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67599182
复制相关文章
相似问题
React不会在自定义钩子中的状态更新中重新呈现所有组件。
自定义钩子状态更新不重新呈现组件。
如何用已在自定义钩子中更新的状态更新父组件？
React钩子状态-不更新组件
不使用自定义钩子更新的组件本地状态
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
