NextJS服务器父组件如何处理useState数组与筛选状态传递

背景 #

我是一名正在通过搭建简易电商列表页学习NextJS和React的初学者，该页面支持商品搜索与筛选功能。

现有理解 #

• 父组件通常应负责获取数据并传递给子组件（参考StackOverflow相关问题）
• 父组件应管理状态并传递给子组件（遵循React文档「状态提升」原则）

遇到的问题 #

• 父组件是服务器组件，无法使用useState（仅客户端组件可用），不清楚如何遵循React文档的状态管理建议
• 无法将子组件中的selectedFilters状态数组传递给父组件，而我需要把激活的筛选条件传入父组件的fetchProducts函数，以展示匹配的商品

疑问 #

我的思路或结构是否存在问题？

代码示例 #

父组件 -- Page.tsx #

// Note: Missing array of filter state, only has searchQuery

export default async function Page({
    searchParams,
}: {
    searchParams?: {
        query?: string;
    };
}) {
    const query = searchParams?.query || '';
    const products = await fetchProducts(query);

    return (
        <div>
            <SideNav/>
            <ProductsTable products={products} />
        </div>
    );
}

子组件 -- sidenav.tsx #

'use client';

const filters = [
    {
        id: 'brand',
        name: 'Brand',
        options: [
            { value: 'nike', label: 'Nike', checked: false },
            { value: 'adidas', label: 'Adidas', checked: false },
        ],
    },
    {
        id: 'type',
        name: 'Type',
        options: [
            { value: 'basketball', label: 'Basketball', checked: false },
            { value: 'running', label: 'Running', checked: false },
            { value: 'training', label: 'Training', checked: false },            
        ],
    },
]

export default function SideNav() {
    const [selectedFilters, setSelectedFilters] = useState(filters);  
    const updateFilters = (filterId: string, optionValue: string, checked: boolean) => {

        setSelectedFilters((prevFilters) => {
            return prevFilters.map((filter) => {
                if (filter.id === filterId) {
                    filter.options = filter.options.map((option) => ({
                        ...option,
                        checked: option.value === optionValue ? checked : option.checked,
                    }));
                }
                return filter;
            });
        });
    };

    return (
        <>
            {/* Search bar */}
            <div>
                <Search />
            </div>

            {/* Filters */}
            <div>
                <form>
                    {selectedFilters.map((filter) => (
                        <div key={filter.id}>
                            <h3>{filter.name}</h3>
                            {filter.options.map((option) => (
                                <div key={option.value}>
                                    <input
                                        id={`${filter.id}-${option.value}`}
                                        value={option.value}
                                        type="checkbox"
                                        checked={option.checked}
                                        onChange={(e) =>
                                            updateFilters(filter.id, option.value, e.target.checked)
                                        }
                                    />
                                    <label
                                        htmlFor={`${filter.id}-${option.value}`}
                                    >
                                        {option.label}
                                    </label>
                                </div>
                            ))}
                        </div>
                    ))}
                </form>
            </div>
        </>
    )
}

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