如何将数据添加/删除到状态取决于是否选中了复选框，然后取消选中

Question

我目前正在尝试从复选框、id中获取值，这样我就可以执行一些逻辑并将它们存储在数据库中。我想做的是一个类似于周日历的事情，如果你点击一个，就意味着你选择了那一天，例如id: 1 = Sun，但如果我再次点击它，我不希望它重复id，我宁愿它不被选中，也就是说，删除它。这就是我所做的，我甚至尝试过使用集合，但它不起作用(集合添加和删除了一些东西，但问题显然在(prev) => [...]上(。我认为这就是我做错的地方，所以我认为我只需要一些关于如何做的建议。

const [dayId, setDayId] = useState([]);
{days.map((day, idx) => (
<input onChange={(e) => {
let checked = e.target.value;
const values = new Set();
setDays(
days.map(data => {
if (data.id === day.id) {
let value = e.target.value;
data.id = value;
if(data.select === false) {
data.select = true;
}
else {
data.select = false;
}
}
return data;
})
);
if(values.has(checked)) {
values.delete(checked);
}
if(e.target.checked === true) {
values.add(checked);
}
if(e.target.value === false) {
values.delete(checked);
}
setDayId(prev => {
return [...prev, ...values]
})
console.log("CHECKING CHECKED VALUE", e.target.checked);
console.log("WHAT IS THE SET VALUE", values)
}} key={idx} name={day?.name} type="checkbox" value={day?.id} checked={day.select}  />
))}

总之，我希望该数组添加删除值，这取决于它们是被选中还是被取消选中，set实际上是这样做的，但这些值没有保留，所以这就是我这样做的原因，setDayId(prev => {return [...prev, ...values]})，但它保留了这些值，从不删除它们，甚至复制它们。如有任何帮助，我们将不胜感激。

Answer 1

如果我理解你的问题，你基本上想在checked为true的情况下添加id，在checked为false的情况下从dayId状态中删除id。在setDayId中，检查checked值，如果为true，则浅层复制dayId状态并附加新id(value(，否则使用.filter函数将其从dayId数组中删除。

{days.map((day, idx) => (
<input
onChange={(e) => {
const { checked, value } = e.target;
setDays(
days => days.map(data => {
if (data.id === day.id) {
return {
...data,
id: value,
select: !data.select,
};
}
return data;
})
);

setDayId(prev => {
return checked
? [...prev, value]                  // add if checked
: prev.filter(val => val !== value) // remove if not checked
});
console.log("CHECKING CHECKED VALUE", e.target.checked);
console.log("WHAT IS THE SET VALUE", values)
}}
key={idx}
name={day?.name}
type="checkbox"
value={day?.id}
checked={day.select}
/>
))}