React传递useState的setter函数给子组件时报setActiveUser不是函数错误

架构老林

2026-8-29

报错根因

React函数组件只会接收单个props对象作为入参，你在AuthPage.js中的参数接收写法完全不符合规则：

最初写的function AuthPage(users, setActiveUser)，相当于把App传入的整个props对象（包含users、setActiveUser两个字段）整体赋值给了第一个参数users，第二个参数setActiveUser没有任何传入值，本身就是undefined。后续你把这个users（也就是整个props对象）传给Login组件，Login解构时自然拿不到正确的setActiveUser方法，打印类型异常、调用报错。
后续修改的function AuthPage(users, {setActiveUser})逻辑同样错误，函数组件不会传递第二个入参，解构第二个参数永远只能拿到undefined。

修复代码

只需要修正AuthPage.js的props接收逻辑即可，两种正确写法选一种就行：

写法1：入参直接解构props

import React from 'react';
import Login from './Login';
import './AuthPage.css'

// 正确解构单个props对象上的字段
export default function AuthPage({ users, setActiveUser }){
    return (
        <div className='auth-block'>
            <Login users={users} setActiveUser={setActiveUser}/>
        </div>
    );
}

写法2：接收props后逐层取值

import React from 'react';
import Login from './Login';
import './AuthPage.css'

export default function AuthPage(props){
    return (
        <div className='auth-block'>
            <Login users={props.users} setActiveUser={props.setActiveUser}/>
        </div>
    );
}

避坑提醒

你当前贴出的Login.js代码直接在组件根作用域调用setActiveUser，会导致组件首次渲染就触发父组件状态更新，父组件更新后重传props引发Login重渲染，再次触发setState形成无限循环。请把状态更新逻辑放到表单提交事件回调中执行，不要直接写在组件函数顶层。