如何将 React Context 与 Hooks 一起使用？

Posted 2023-04-14

【中文标题】如何将 React Context 与 Hooks 一起使用？

【英文标题】：How to use React Context's with Hooks?

【发布时间】：2021-07-09 23:32:16

【问题描述】：

在我的应用程序中，我尝试将 React Context 与 setState 一起使用。

const userContext = React.createContext([ user:  , () => ]);
const userHook = useState( user:  );

<userContext.Provider value=userHook>
// some other code here
</userContext.Provider>

但是，我的 linter 中出现此错误：。

谁能指出我正确的方向？

另外，当我尝试在许多教程中使用React.createContext() 时，例如：

const ThemeContext = createContext(["green", () => ]);

我收到另一个关于意外空箭头函数的 linter 错误。我该如何解决？

【参考方案1】：

您需要修复正在创建的上下文的类型：

import  Dispatch, SetStateAction  from "react";

const userContext = createContext<
  [ user:  , Dispatch<SetStateAction< user:  >>]
>([ user:  , () => ]);

现在，您在提供时不会看到任何类型错误：

const userHook = useState( user:  );
// ...
<userContext.Provider value=userHook>
  <Foo />
</userContext.Provider>

请记住，userHook 将是一个数组，您可以将其解构为：

function Foo() 
  const userHook = useContext(userContext);
  const [user, setUser] = userHook // Here, destructuring the array
  return <h1>Foo</h1>;

【参考方案2】：

const userHook = useState( user: );是错的。 useState 返回 [state, setState]。尝试更改实现。

const [state, setState] = useState( user:  );

<userContext.Provider value=state>
// some other code here
</userContext.Provider>

【讨论】：

但是我不会因为我没有使用钩子而无法更新它吗？我需要能够以某种方式通过setState

我有这个有效的代码： const themeHook = useState("darkblue"); return ( .... );但是当我使用对象时它不起作用。

你也可以在它被解构之前使用它。