React.js/Next.js中复选框过滤数据的状态更新异常问题

问题现象 #

开发React.js Web应用时，侧边面板通过复选框实现数据过滤，尝试将选中状态传回父页面并显示选中数量，但点击复选框时console无输出，选中数量始终显示0，状态未更新。已确认关键词列表能正常渲染，但状态更新逻辑完全失效。

原代码 #

'use client'

import { fetchDesignKeywords } from '@/app/lib/data'; /* returns an Array of 2-element arrays */
import { useState } from 'react';

function KeywordFilterControl(props) {
    return(
        <ul className="w-[180px] truncate">
            {props.dks.map(keyword => {
                return(
                    <div key={keyword[0]}>
                        <label className="form-check-label" key={keyword[0]}>
                            <input className="form-check-input mr-2" id={keyword[0]} type="checkbox"
                                onChange={e => props.updateFilters(e.target.checked, keyword[0])}></input>
                            {keyword[0]} ({keyword[1]})
                        </label>
                    </div>
                );
            })}
        </ul>
    );
}

export default async function Page() {
    let [categoryFilters, setCategoryFilters] = useState(new Set());

    const dks = await fetchDesignKeywords()
    function updateFilters(checked, categoryFilter) {
        console.log(categoryFilter)
        if (checked)
          setCategoryFilters((prev) => new Set(prev).add(categoryFilter));
        if (!checked)
          setCategoryFilters((prev) => {
            const next = new Set(prev);
            next.delete(categoryFilter);
            return next;
          });
      }
    return (
        <div>
            
            <div className="flex flex-row">
                <KeywordFilterControl 
                    updateFilters={updateFilters}
                    dks={dks}/>
                <p>Selected: {categoryFilters.size}</p>
            </div>
        </div>
    )
}

核心原因 #

把Page组件声明为async函数后，React会将其当作异步服务器组件处理，而useState是客户端专属钩子，无法在服务器组件中正常工作。即使添加了'use client'指令，异步组件的特性会导致每次状态更新时，组件函数体被重新执行，重新调用await fetchDesignKeywords()，同时重置categoryFilters的初始状态，最终造成状态更新失效、交互无响应。

解决步骤 #

拆分异步数据获取与客户端状态逻辑，将状态管理和交互部分单独封装为客户端组件：

1. 封装客户端状态容器组件 #

创建KeywordFilterContainer.jsx：

'use client'
import { useState } from 'react';
import KeywordFilterControl from './KeywordFilterControl';

export default function KeywordFilterContainer({ dks }) {
    const [categoryFilters, setCategoryFilters] = useState(new Set());

    const updateFilters = (checked, categoryFilter) => {
        console.log(categoryFilter);
        if (checked) {
            setCategoryFilters(prev => new Set(prev).add(categoryFilter));
        } else {
            setCategoryFilters(prev => {
                const next = new Set(prev);
                next.delete(categoryFilter);
                return next;
            });
        }
    };

    return (
        <div className="flex flex-row">
            <KeywordFilterControl updateFilters={updateFilters} dks={dks} />
            <p>Selected: {categoryFilters.size}</p>
        </div>
    );
}

2. 修改Page组件为纯异步服务器组件 #

import { fetchDesignKeywords } from '@/app/lib/data';
import KeywordFilterContainer from './KeywordFilterContainer';

export default async function Page() {
    const dks = await fetchDesignKeywords();
    return (
        <div>
            <KeywordFilterContainer dks={dks} />
        </div>
    );
}

3. 保留原KeywordFilterControl组件 #

function KeywordFilterControl(props) {
    return(
        <ul className="w-[180px] truncate">
            {props.dks.map(keyword => (
                <div key={keyword[0]}>
                    <label className="form-check-label">
                        <input 
                            className="form-check-input mr-2" 
                            id={keyword[0]} 
                            type="checkbox"
                            onChange={e => props.updateFilters(e.target.checked, keyword[0])}
                        />
                        {keyword[0]} ({keyword[1]})
                    </label>
                </div>
            ))}
        </ul>
    );
}

export default KeywordFilterControl;

效果验证 #

修改后，点击复选框时console会正常输出选中的关键词，选中数量会实时更新，状态管理恢复正常。

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