我的数组
const initial_business_hours = [
{ "day": "Sunday", "open_time": "Not set", "close_time": "Not set" },
{ "day": "Monday", "open_time": "Not set", "close_time": "Not set" }
]
保存在一个状态
const [business_hours, setBusinessHours] = useState(initial_business_hours);
开关切换状态
const [isSundaySwitchOn, setIsSundaySwitchOn] = useState(true);
从数组中删除/过滤对象的逻辑
const onToggleSundaySwitch = () => {
setIsSundaySwitchOn(!isSundaySwitchOn)
if (JSON.stringify(business_hours).includes(JSON.stringify({ "day": "Sunday", "open_time": "Not set", "close_time": "Not set" }))) {
const updatedBusinessHours = business_hours.filter(item => item.day !== business_hours[0].day)
return setBusinessHours(updatedBusinessHours)
}
setBusinessHours([...business_hours, { "day": "Sunday", "open_time": "Not set", "close_time": "Not set" }])
};
发生什么事了
初始开关状态为真/开。当我关闭开关时,它会删除所需的对象{ "day": "Sunday", "open_time": "Not set", "close_time": "Not set" }
。到目前为止还不错。
当前阵列状态:
[{"close_time": "Not set", "day": "Monday", "open_time": "Not set"}]
如果我打开开关,它会再次添加{ "day": "Sunday", "open_time": "Not set", "close_time": "Not set" }
。这也是期望的行为。
当前阵列状态:
[{"close_time": "Not set", "day": "Monday", "open_time": "Not set"},
{"close_time": "Not set", "day": "Sunday", "open_time": "Not set"}]
但是在下一次关闭切换时,删除的内容现在是{ "day": "Monday", "open_time": "Not set", "close_time": "Not set" }
当前阵列状态:
[{"close_time": "Not set", "day": "Sunday", "open_time": "Not set"}]
在下一次打开时,数组现在为空。
[]
如果我再次关闭它,数组现在是:
[{"close_time": "Not set", "day": "Sunday", "open_time": "Not set"}]
如果我再次打开它,数组再次为空:
[]
它继续执行以下行为:再次添加“Sunday”对象,然后为空,然后在每次切换时添加“Sunday”。
我想实现的是这个场景:
我知道错误在filter()
内部的某个地方,我只是看起来无法弄清楚。
它是否与实际的filter()
以及它的过滤条件item => item.day !== business_hours[0].day
和.includes()
有关?
谢谢你的帮助,我是一个初学者,当涉及到数组操作。
2条答案
按热度按时间rdrgkggo1#
你需要把你的代码改成这个
在你的代码里
你在上面这行做的是过滤掉第一个对象。不管是星期天还是星期一。
business_hours[0]
选择数组中的第一个对象。它不检查是星期天还是星期一或其他时间。sirbozc52#
你可以使用下面给出的东西。