自定义useTheme Hook调用报错：setStatus is not a function求助

1. 核心问题：useEffect误用清理函数 #

你的useEffect中返回的函数是清理函数，它只会在组件卸载或依赖项更新时触发，而非status变化时立即执行。这不仅会导致颜色更新逻辑未按预期运行，还可能引发setStatus的引用异常。

2. 修复步骤 #

步骤1：调整useEffect逻辑结构 #

将颜色更新逻辑直接放在useEffect的回调函数内，移除清理函数包裹：

export const useTheme = ({ backGround, fontColor }: themeProps) => {
  const [bgColor, setBgColor] = useState<string>("");
  const [textColor, setTextColor] = useState<string>(" ");
  const [status, setStatus] = useState<string>("");

  useEffect(() => {
    if (status === "pending") {
      setBgColor("#F2F2F2");
      setTextColor("#666666");
    } else if (status === "Rejected") { // 修正拼写错误：Rejceted → Rejected
      setBgColor("#E23525");
      setTextColor("#E23525");
    } else if (status === "Approved") {
      setBgColor("#E8FDF3");
      setTextColor("#12B76A");
    }
  }, [status]); // 仅保留status作为依赖，逻辑仅与它相关

  return { bgColor, textColor, setBgColor, setTextColor, setStatus };
};

步骤2：检查Hook调用与解构 #

确保调用useTheme时正确解构setStatus，避免变量名错误或解构方式不当：

// 正确调用示例
const { setStatus, bgColor, textColor } = useTheme({ backGround: "", fontColor: "" });

步骤3：修正拼写错误 #

代码中Rejceted为拼写错误，改为Rejected避免状态匹配失败。

3. 额外优化建议 #

• 若backGround和fontColor用于初始化颜色，可直接传入useState初始值：

  const [bgColor, setBgColor] = useState<string>(backGround || "");
  const [textColor, setTextColor] = useState<string>(fontColor || " ");
  

• 抽离状态-颜色映射常量，提升代码可读性：

  const STATUS_COLOR_MAP = {
    pending: { bg: "#F2F2F2", text: "#666666" },
    Rejected: { bg: "#E23525", text: "#E23525" },
    Approved: { bg: "#E8FDF3", text: "#12B76A" }
  } as const;
  
  useEffect(() => {
    const config = STATUS_COLOR_MAP[status as keyof typeof STATUS_COLOR_MAP];
    if (config) {
      setBgColor(config.bg);
      setTextColor(config.text);
    }
  }, [status]);
  

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