自定义钩子的状态不会在所有组件中更新？答案

【问题标题】：Custom hook's state does not update across all components?自定义钩子的状态不会在所有组件中更新？
【发布时间】：2021-08-08 10:57:16
【问题描述】：

import { useState } from 'react';

export default function usePrivacyMode() {
  const [isPrivacyOn, setIsPrivacyOn] = useState(false);

  return {
    isPrivacyOn,
    setIsPrivacyOn
  };
}

这是我的自定义钩子。我在 PrivacyIcons 组件中设置状态，然后使用 isPrivacyOn 根据值显示/隐藏表中的值。但是在不同的组件中 isPrivacyOn 没有改变，它只在 PrivacyIcons 中改变？为什么我不能在一个组件中更改它，然后在所有组件中使用该值？谢谢。

【问题讨论】：

因为这就是代码所说的，你想要一个context 来做你想要的逻辑。那么你可以为这个上下文创建一个钩子。
本地状态不会全局共享，所以你应该将isPrivacyOn传递给组件的props、context、redux等
您是否使用 isPrivacyOn 的值作为子组件的道具？ “跨所有组件”到底是什么意思？根据您上面提供的有限数据，似乎还有其他方法可以做到这一点。首先想到的是使用 Redux，另一个是使用 React Context。
@iismaell “跨所有组件”意味着我从 usePrivacyMode 挂钩中解构 isPrivacyOn 并使用我需要的组件中的值。
你在 usePrivacyMode 函数中做了什么特别的事情。我不明白为什么必须将 useEffect 函数包装在另一个函数中。并且请注意，在使用钩子时您应该遵循一定的规则。一个是钩子只能在 React 函数中使用，但在这种情况下你使用的是常规的 javascript 函数。 reactjs.org/docs/hooks-rules.html

标签： javascript reactjs react-hooks state use-state

【解决方案1】：

状态并不意味着在组件之间共享。您正在寻找 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;

【讨论】：