无法从上下文API获取状态设定器，获得setGlobal不是一个函数

Question

我对一个React应用程序有问题。我需要将一系列物品保持在我的全球状态。

这是我的钩子：

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

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

export default useGlobal;

这是我的提供者：

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

确保您正在调用此行const {setGlobal} = useglobal（） ins app函数，而不是外部，因为它是钩子，它应该遵循挂钩规则。类似：

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

另外， global> global 是JavaScript中的保留名称。为避免混乱和可能的错误，请使用其他名称，例如globalData。最后，确保app被包装在GlobalProvider中，如下：

<GlobalProvider >
  <App/>
</GlobalProvider>

Answer 2

usecontext/useglobal是钩子，因此您不能在React组件之外使用它们。

另外，请确保您的hadlegotoa组件在globalContextProvider：

import useGlobal from "../hooks/useGlobal.js";

const HandleGotoA = () => { //Changed to uppercase to follow convention
    const { setGlobal } = useGlobal();

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

Answer 3

我认为这与这一行有关

const { setGlobal } = useGlobal();

：我认为应该是：

const { setGlobal } = useGlobal;

因为使用括号，您正在调用该函数，因此setGlobal是useglobal函数而不是函数本身的结果。

Answer 4

首先，您不能使用挂钩外部组件或自定义钩子。 https://reactjs.org/docs/hooks/hooks/hooks-rules.html

//custom hook
const useHandleGoToA = () => {
  // this line moved inside the hook 
  const { setGlobal } = useGlobal();

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

}

// component
const ComponentA = () => {
  // this line moved inside the component. 
  const { setGlobal } = useGlobal();

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

  return null;
}