javascript - 自定义 Hook 的状态不会在所有组件中更新？

Question

import { useState } from 'react';

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

  return {
    isPrivacyOn,
    setIsPrivacyOn
  };
}

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

Answer 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;