如何在 Typescript React 中将复选框组中的项目一项一项添加到数组中

Question

我想在复选框被一一勾选时将项目一一添加到数组中。我通过传播值尝试了以下代码，但它总是用下一个复选框中的值重写前一个值。

const [items, setItems] = useState<any>([])
const [checked, setChecked] = useState(false)

const handleSelectable = () => {
        if(!checked){
            setChecked(true)
            let new_items = {id:props.id, name:props.title}
            setItems(items.push(...items, new_items))
            
            console.log(items)
        
        }else{
            setChecked(false)
        }
    }

我这样做是为了从一组复选框中收集项目并将它们存储在一个数组中，然后使用批处理函数将它们逐个添加到 firestore db。但这些值不断被覆盖。

Answer 1

代码中的问题似乎在于如何更新项目数组的状态。您应该使用先前的项目和新项目创建一个新数组，而不是直接将新项目推入项目数组中。

const [items, setItems] = useState<any[]>([]);
const [checked, setChecked] = useState(false);

const handleSelectable = () => {
    if (!checked) {
        setChecked(true);
        const new_item = { id: props.id, name: props.title };
        setItems(prevItems => [...prevItems, new_item]);
        console.log(items);
    } else {
        setChecked(false);
    }
};