本文详解 React TypeScript 项目中因误传布尔值代替状态更新函数而导致的类型错误（TS2322），并提供基于 useState 的标准初始化与更新方案。
本文详解 react typescript 项目中因误传布尔值代替状态更新函数而导致的类型错误（ts2322），并提供基于 `usestate` 的标准初始化与更新方案。
在 React + TypeScript 应用中，常见错误之一是将布尔值直接赋给期望接收状态更新函数（如 (value: boolean) => void）的 prop，从而触发 TypeScript 类型错误：Type 'boolean' is not assignable to type '(editMode: boolean) => void'.ts(2322)。该错误并非源于 useState 本身，而是组件调用时 props 传参逻辑错位所致。
典型错误场景如下（错误写法）：
// ❌ 错误：把 boolean 值传给了本应接收 setter 函数的 prop
root.render(
<react.strictmode><app seteditmode="{false}"></app> {/* 这里 setEditMode 被误设为布尔值 */}
</react.strictmode>
);
此时若 App 组件定义中 setEditMode 的 prop 类型为 React.Dispatch
✅ 正确做法是：通过 initialEditMode 等初始化 prop 传入初始状态值，并在组件内部使用 useState(initialEditMode) 创建受控状态。更新操作始终通过 setEditMode 函数触发：
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
// src/index.tsx
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const root = createRoot(document.getElementById("root")!);
root.render(
<react.strictmode><app initialeditmode="{false}"></app> {/* ✅ 传入初始值，非 setter */}
</react.strictmode>
);
// src/App.tsx
import React, { useState } from "react";
interface Props {
initialEditMode: boolean;
}
export default function App({ initialEditMode }: Props) {
const [editMode, setEditMode] = useState(initialEditMode);
const openEditMode = () => setEditMode(true);
const closeEditMode = () => setEditMode(false);
return (
<div>
{editMode ? (
<div>
<p>当前处于编辑模式</p>
<button onclick="{closeEditMode}">退出编辑</button>
</div>
) : (
<button onclick="{openEditMode}">进入编辑</button>
)}
</div>
);
}
⚠️ 注意事项：
- 不要将 setState 函数（如 setEditMode）作为 prop 名称对外暴露并手动传入——它应由 useState 内部生成并仅在组件内部使用；
- 若需跨层级控制子组件编辑态，应通过回调函数（如 onToggleEdit: () => void）或状态提升（Lifting State Up）实现，而非直接传递 setXXX；
- 初始化状态推荐使用 useState(initialValue) 而非 useState(() => initialValue)，除非初始值计算开销大或依赖外部变量。
总结：该错误本质是 TypeScript 对函数类型与原始类型的强约束提醒。遵循“props 传初始值、内部用 useState 管理状态、事件中调用 setter 函数”的模式，即可彻底规避此类类型冲突，同时保持状态逻辑清晰、可维护性强。
