为什么每次选择按钮时我的状态（数组）都会重置，而不是添加到数组中？

Question

const FilterElement: FunctionComponent = ({ }) => {

    const [selectedProperty, setSelectedProperty] = useState<ReactNode>();
    const [type, setType] = useState<TypeName[]>([]);

    const handleType = (value: TypeName[]) => {
        const newValue = [...type as TypeName[], value] as TypeName[];
        setType(newValue);
    }

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

    return (
        <>
            <div className='filter-element'>
                <select name='filter-property' onChange={onChange}>
                    <option value='type'>Type</option>
                </select>
                {selectedProperty}
            </div>
            {type ? <Container field={type} /> : null}
        </>
    );
}

interface IFilterElementTypeProps {
    handleType: (value: TypeName[]) => void;
}

const FilterElementType: FunctionComponent<IFilterElementTypeProps> = ({ handleType }) => {

    const onClick = (event: MouseEvent<HTMLButtonElement>) => {
        const { value } = event.currentTarget;
        handleType([value as TypeName]);
    };

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

    return (
        <div className='filter-element-type'>
            {typeList}
        </div>
    );
}

export default FilterElementType;

我试图理解为什么，鉴于提供的两个组件，每次在“FilterElementType”组件上选择一个选项时，“FilterElement”上的“type”状态都会重置为默认状态“[]”。

我对代码的理解是每个选择都应该添加到数组中，而不是被替换。我将如何改变它以确保数组被修改（添加）而不是被替换？

我尝试了无数次修改来添加状态，但似乎无论怎样，组件都会重新渲染，状态也是默认的。

Answer 1

这里发生了很多不必要的类型转换和数组包装。我也不建议在状态中存储元素。

首先，如果您只期望

onClick

 中有一个值，为什么要将其包装在数组中？只需发送值即可

interface IFilterElementTypeProps {
  handleType: (value: TypeName) => void;
}

在你的组件中...

const onClick = (event: MouseEvent<HTMLButtonElement>) => {
  const { value } = event.currentTarget;
  handleType(value as TypeName); // 👈 no array wrapper
};

其次，如果您要根据当前值修改状态，请使用函数设置器

const handleType = (value: TypeName) => { // 👈 no array here
  setType((prev) => [...prev, value]); // 👈 functional setter, no casting
};