使用useContext封装函数报错：Invalid hook call问题求助

你遇到的Invalid hook call错误，核心原因是React Hook（比如useContext）只能在函数组件的顶层代码中调用，或是在自定义Hook内部调用。你把useContext放在了普通的事件处理函数updateUserState里，违反了Hook的调用规则，因此触发了错误。

下面提供两种符合React规范的修复方式：

方式一：封装为自定义Hook（推荐复用场景） #

自定义Hook允许调用其他Hook，我们可以把状态更新逻辑封装成一个命名以use开头的自定义Hook（React规范要求），返回绑定好上下文的事件处理函数：

import { useContext } from "react";
import NewUserState from "../context/NewUserState";

// 自定义Hook，用于获取绑定好上下文的状态更新函数
export const useUpdateUserState = () => {
  const [setNewUserState] = useContext(NewUserState);
  
  return (e) => {
    setNewUserState((current) => {
      const updateUser = { ...current.updateUser };
      updateUser[e.target.name] = e.target.value;
      return { ...current, updateUser };
    });
  };
};

在UserDetails组件中使用这个自定义Hook：

import { useUpdateUserState } from "../helpers/useUpdateUserState";

const UserDetails = () => {
  // 在组件顶层调用自定义Hook，获取事件处理函数
  const updateUserState = useUpdateUserState();

  return (
    <>
      <form>
            <label htmlFor="first-name">First Name*</label>
            <input
              type="text"
              id="first-name"
              name="first_name"
              onChange={updateUserState}
            />
      </form>
    </>
  );
};
export default UserDetails;

方式二：组件内直接处理（适合复用需求低的场景） #

如果不需要在多个组件复用该逻辑，可以直接在UserDetails组件内部获取上下文并定义事件处理函数：

import { useContext } from "react";
import NewUserState from "../context/NewUserState";

const UserDetails = () => {
  // 在组件顶层调用useContext获取上下文
  const [setNewUserState] = useContext(NewUserState);

  const updateUserState = (e) => {
    setNewUserState((current) => {
      const updateUser = { ...current.updateUser };
      updateUser[e.target.name] = e.target.value;
      return { ...current, updateUser };
    });
  };

  return (
    <>
      <form>
            <label htmlFor="first-name">First Name*</label>
            <input
              type="text"
              id="first-name"
              name="first_name"
              onChange={updateUserState}
            />
      </form>
    </>
  );
};
export default UserDetails;

内容的提问来源于stack exchange，提问作者flinch85