React+TypeScript项目报错setToken is not a function该如何解决？

数据老陈

2026-9-24

报错原因与修复方案

核心问题出在Login组件的props接收方式错误：React函数组件的第一个入参是所有传递属性组成的props对象，你当前直接将setToken作为组件第一个入参，相当于把整个props对象命名为setToken，自然不是函数类型，调用时就会触发类型错误。你的App.tsx传递props的写法没有问题，不需要修改。

修复方法

方法1：解构props接收（推荐）

直接从props对象中解构出setToken属性，同时正确标注类型，修改Login组件的入参部分即可：

// 先定义组件props类型，便于后续维护
type LoginProps = {
  setToken: React.Dispatch<React.SetStateAction<string | null>>
}
// 解构props拿到setToken
function Login({ setToken }: LoginProps) {
  // 组件内部原有逻辑全部保持不变即可
}

方法2：保留完整props对象调用

如果不想使用解构写法，也可以接收完整props对象，仅修改调用setToken的位置即可：

type LoginProps = {
  setToken: React.Dispatch<React.SetStateAction<string | null>>
}
function Login(props: LoginProps) {
  const [username, setUserName] = React.useState<string | null>(null);
  const [password, setPassword] = React.useState<string | null>(null);
  const handleSubmit = async (e: { preventDefault: () => void; }) => {
    e.preventDefault();
    const token = await loginUser({
      username,
      password
    });
    // 调用时加props前缀
    props.setToken(token);
  }
  // 原有渲染逻辑保持不变
}