React in tsx delete state value onClick

Question

我想过滤类别，如果我点击类别，我需要查看它们。如果我再次单击它们，我还需要删除它们。我将所有活动类别保存在一个状态中，并希望在再次单击它们后将其删除，现在我的问题是如何以最聪明的方式做到这一点？ 状态：

const [activeCategories, setActiveCategories] = useState<string[]>([]);

function handleClick(catId: string) {
    setActiveCategories([...activeCategories, catId]);
}

使用 ActiveCategories 将获取活动 ID。

Answer 1

修改handleClick函数，检查catId是否存在。如果存在则删除它，如果它在 state 中不存在则添加它：

function handleClick(catId: string) {
    if(activeCategories.findIndex(id => catId === id) >= 0){
        const updateState = activeCategories.filter(id => id !== catId)
        setActiveCategories(updateState);
    } else {
        setActiveCategories([...activeCategories, catId]);
    }
}