如何连接对象是useState数组

Question

我有useState变量。我想将该值与新对象连接起来。

const [dates,setDates] = useState(["Mon","Sun"])

规则：1.如果存在带有isSelected标志的日期，则将其设为假

[{day:"mon",isSelected:false}]

否则，制作为

[{day:"mon",isSelected:true}]

我下面的功能，

const handleDay = (day) => {
setDates((x) => {
x.map((v) => {
if (day === v.day && v.isSelected) {
v.isSelected = true;
return {
v,
};
} else {
return {
day,
isSelected: true,
};
}
});
});
};
handleDay('mon');

预期输出

[{day:"mon",isSelected:true}, 'Sun']

但我收到了，

[{
"day": "Mon",
"isSelected": true
}, {
"day": "Mon",
"isSelected": true
}]

Answer 1

用这个替换map代码

arr.map(v => {
if (day === v.day || day === v) {
return {
day: v.day ? v.day : v,
isSelected: !v.isSelected
};
} else {
return v
}
});

let arr = ["Mon", "Sun"]
const handleDay = day => {
let arr2 =  
arr.map(v => {
if (day === v.day || day === v) {
return {
day: v.day ? v.day : v,
isSelected: !v.isSelected
};
} else {
return v
}
});

return arr2;
};
console.log(handleDay('Mon'));
arr = handleDay('Mon');
console.log(handleDay('Mon'));

Answer 2

据我所知，handleDay应该是这样的：

const handleDay = (day) => {
setDates((x) => {
return x.map((v) => {
if (day === v.day && v.isSelected) {
v.isSelected = false;
return {
v,
};
} else {
return day
}
});
});
};

Answer 3

piotruss几乎是正确的。

const handleDay = (day) => {
setDates((x) => {
return x.map((v) => {
if (day === v || day === v.day) {
return {
day,
isSelected: !v.isSelected,
};
} else {
return v;
}
});
});
};

Answer 4

您还可以使用spread运算符连接对象。

const handleDay = (day) => {
setDates((x) => {
return x.map((v) => {
if (day === v.day && v.isSelected) {
v.isSelected = false;
return {
v,
};
} else {
return day
}
});
});
};