NextJS+React中无法更新父组件state值的问题求助

核心问题分析 #

1. 类型不匹配错误：你把TRPC useQuery返回的完整Observer对象（包含status、isLoading等属性）直接存入useState，后续修改时类型无法对齐，导致报错。
2. 过滤逻辑失效：filteredLists里的filter回调用了大括号但没写return，实际返回undefined，根本没过滤数据。
3. React语法错误：子组件里的按钮事件是小写onclick（React需要驼峰onClick），且函数绑定写法错误（handleChange()会直接执行，应该传函数引用）。
4. 冗余状态管理：没必要复制整个TRPC query对象，只需存储原始用户数据和过滤条件，过滤结果通过计算得出即可。

分步修复代码 #

1. 父组件 Users.tsx 重构

const Page = () => {    
    // 调用TRPC获取原始用户数据
    const { data: rawUsersData, isLoading, error } = trpc.users.getUsersSummary.useQuery(
        {},
        {
            onError(err) {
                console.log('Failed to retrieve users summary')
            },
        },
    );

    // 只存过滤条件，过滤后的列表实时计算
    const [filterUsername, setFilterUsername] = useState<string | null>(null);

    // 计算过滤后的用户列表
    const filteredUsers = () => {
        if (!rawUsersData?.users) return [];
        // 修复filter的return问题，或者用箭头函数省略大括号
        return rawUsersData.users.filter(user => user.name === filterUsername);
    };

    const updateFilter = (username: string) => {
        setFilterUsername(username);
    };

    // 处理加载/错误状态
    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>Failed to load users</div>;

    return (
        <div>
            {/* 传递过滤后的列表和更新函数 */}
            <UserList 
                setUserType={updateFilter} 
                usersSummary={{
                    ...rawUsersData,
                    users: filterUsername ? filteredUsers() : rawUsersData.users
                }} 
            />
        </div>
    )
}

2. 子组件 UserList.tsx 修正

import { useEffect } from 'react';

// 补充类型定义
type User = {
    name: string;
    status: string;
};

type UserFilterPropTypes = {
    usersSummary: {
        totalUsers: number;
        users: User[];
    };
    setUserType: (username: string) => void;
};

export const UserList = ({ usersSummary, setUserType }: UserFilterPropTypes) => {
    const items = usersSummary?.users;

    const handleChange = () => {
        setUserType("user1");
    };

    return (
        <div>
            {/* 修正事件绑定语法 */}
            <button onClick={handleChange}>Filter</button>
            {/* 遍历渲染用户 */}
            {items?.map(user => (
                <div key={user.name}>
                    {user.name} - {user.status}
                </div>
            ))}
        </div>
    );
};

额外优化建议 #

• 避免使用any类型，给用户数据定义明确的TypeScript接口，减少类型错误。
• 如果过滤逻辑复杂，可以把filteredUsers抽成自定义hook复用。
• 若需要保留“全部显示”状态，可将filterUsername设为string | null，传入null时显示所有用户。

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