Question

public class RepoFactory {
    @Autowired
    private IConfigRepository configRepo;
    
     @Autowired
    private IBusinessRepository businessRepo;
   
    public IConfigRepository getConfigRepository() {
        return configRepo;
    }
    
    public IBusinessRepository getBusinessRepository() {
        return businessRepo;
    }
}

这是我的自定义钩子。我在 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;

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

1 个答案: