javascript - 无法从上下文 API 获取状态 setter ，获取 setGlobal 不是函数

Question

我对 React 应用程序有疑问。我需要在我的全局状态中保留一系列项目。

这是我的钩子(Hook):

import { useContext } from "react";
import GlobalContext from "../context/GlobalProvider";

const useGlobal = () => {
return useContext(GlobalContext);
}

export default useGlobal;

这是我的 vendor :

import { createContext, useState } from "react";
const GlobalContext = createContext({});

export const GlobalProvider = ({ children }) => {
const [global, setGlobal] = useState({});

return (
    <GlobalContext.Provider value={{ global, setGlobal }}>
        {children}
    </GlobalContext.Provider>
)
}

export default GlobalContext;

在我的 App.js 中我有:

import useGlobal from "../hooks/useGlobal.js";
const { setGlobal } = useGlobal();

const handleGotoA = () => {
    
    const id_G = item
    const id_G1 = item1
    const id_G2 = item2
    setGlobal({ id_G, id_G1, id_G2 });
   
}

我得到了这个错误:

"setGlobal is not a function"

而且我找不到也不明白原因，任何帮助将不胜感激。

Answer 1

确保在 App 函数内而不是在外部调用此行 const { setGlobal } = useGlobal()，因为它是一个钩子(Hook)，它应该遵循 Rules of Hooks .像这样的东西:

const App = ()={
 //...
 const { setGlobal } = useGlobal(); // inside and at the top level of the component
 //...
}

此外，global是 JavaScript 中的保留名称。为避免混淆和可能的错误，请使用其他名称，例如 globalData。最后确保 App 包裹在 GlobalProvider 中，如下所示:

<GlobalProvider >
  <App/>
</GlobalProvider>