React状态数组点击按钮重置而非追加的问题排查与解决

问题根源 #

1. 闭包捕获旧状态：你把<FilterElementType handleType={handleType} />直接存在selectedProperty状态中，这个组件实例会捕获创建它时的handleType函数，而该函数内部的type是当时的状态值（第一次触发onChange时，type是空数组）。后续不管FilterElement怎么重渲染，这个存在状态里的组件实例始终用的是旧的handleType，每次点击按钮都是基于空数组去追加，看起来就像被重置成新数组而非追加。

2. 状态更新未用函数式写法：直接在handleType里使用type变量，可能因为闭包拿到旧的状态值，即使修复了第一个问题，也可能出现状态更新不及时的情况。

修复步骤 #

步骤1：修改selectedProperty的存储逻辑 #

不要存React元素，改成存储选中的属性标识（比如字符串），这样每次渲染时都会生成新的FilterElementType实例，传递最新的handleType：

const FilterElement: FunctionComponent = ({ }) => {
    // 改成存选中的属性类型，比如'type'
    const [selectedProperty, setSelectedProperty] = useState<string>();
    const [type, setType] = useState<TypeName[]>([]);

    // 用函数式更新，确保拿到最新的state
    const handleType = (value: TypeName[]) => {
        setType(prevType => [...prevType, ...value]);
    }

    const onChange = (event: ChangeEvent<HTMLSelectElement>) => {
        const { value } = event.target;
        setSelectedProperty(value);
    };

    return (
        <>
            <div className='filter-element'>
                <select name='filter-property' onChange={onChange}>
                    <option value='type'>Type</option>
                </select>
                {/* 根据选中的属性渲染对应组件 */}
                {selectedProperty === 'type' && <FilterElementType handleType={handleType} />}
            </div>
            {type.length > 0 ? <Container field={type} /> : null}
        </>
    );
}

步骤2：优化FilterElementType的key值（可选） #

原代码里key={uniqueId()}每次渲染都会生成新key，导致按钮频繁销毁重建，建议用type.name作为唯一key：

const typeList = getTypes()
.map(type =>
    <button className='type-button' value={type.name} onClick={onClick} key={type.name}>
        <MoveImage type={type.name} />
    </button>
);

修复逻辑说明 #

• 把React元素从状态中移除，改为在渲染时动态生成，确保每次FilterElement重渲染时，FilterElementType都能拿到最新的handleType函数，彻底避免闭包陷阱。
• 使用setType(prevType => ...)的函数式更新写法，确保每次状态更新都是基于最新的状态值，不会因为闭包拿到旧状态导致更新错误。

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