React函数组件中useToasts钩子调用报错问题求助

这个错误的核心是违反了React钩子的使用规则，和onClick是否脱离组件上下文没有关系——addToast本身是useToasts钩子返回的普通函数，只要能正确获取到，在handleSubmit里调用完全没问题。问题出在useToasts的调用位置不符合要求。

React钩子的强制规则：

• 只能在函数组件的顶层作用域调用钩子，不能嵌套在普通函数、循环、条件判断、useEffect/useCallback的回调里。
• 只能在函数组件或自定义钩子内部调用钩子。

常见错误场景与修复 #

场景1：useToasts在组件外部调用 #

错误示例：

// 错误：钩子在组件外部调用，脱离了组件上下文
const { addToast } = useToasts();
const handleSubmit = () => {
  addToast("提交成功");
};

function SubmitButton() {
  return <button onClick={handleSubmit}>提交</button>;
}

修复：把useToasts移到组件顶层，handleSubmit定义在组件内部：

function SubmitButton() {
  // 正确：在组件顶层调用钩子
  const { addToast } = useToasts();

  const handleSubmit = () => {
    addToast("提交成功");
  };

  return <button onClick={handleSubmit}>提交</button>;
}

场景2：handleSubmit在外部定义，未正确传入addToast #

如果必须把handleSubmit放在组件外部，需要将addToast作为参数传入：

// 外部定义的处理函数，接收addToast作为参数
const handleSubmit = (addToast) => {
  addToast("提交成功");
};

function SubmitButton() {
  const { addToast } = useToasts();
  
  // 调用时传入addToast
  return <button onClick={() => handleSubmit(addToast)}>提交</button>;
}

场景3：useToasts嵌套在非顶层位置 #

错误示例：

function SubmitButton() {
  const handleSubmit = () => {
    // 错误：钩子嵌套在普通函数内部
    const { addToast } = useToasts();
    addToast("提交成功");
  };

  return <button onClick={handleSubmit}>提交</button>;
}

修复：把useToasts移到组件顶层：

function SubmitButton() {
  const { addToast } = useToasts();

  const handleSubmit = () => {
    addToast("提交成功");
  };

  return <button onClick={handleSubmit}>提交</button>;
}

总结 #

只要确保useToasts在函数组件的顶层作用域调用，且handleSubmit能正确访问到钩子返回的addToast函数，就能解决这个错误。onClick本身不会脱离组件上下文，问题的本质是钩子的使用违反了React的规则。

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