indexOf() 没有按预期工作，函数不断添加重复项 - React

Question

const [dates, setDates] = useState([]);

const handleClick = (day) => {
  let newArray = [...dates];
  let indexItem = newArray.indexOf(day);
  indexItem === -1 ? newArray.push(day) : newArray.splice(indexItem, 1);
  setDates(newArray);
};

useEffect(() => {
  console.log(dates);
}, [dates]);

return(
  <DayPicker selectedDays={dates} onDayClick={handleClick} />
)

是否可以更新我的代码以使状态仅包含单击一次并在单击两次时删除的日期？

有点能够在状态中切换日期。

我的函数只在元素添加 2 次后才移除元素，因此 atm 无法从数组中移除重复元素。

handleClick 中的 day 参数以字符串形式返回值，例如：

Fri Mar 05 2021 12:00:00 GMT+0100 (Central European Standard Time)

当 i console.log() 在浏览器中约会时，它是这样的：

0: Wed Mar 03 2021 12:00:00 GMT+0100 (Central European Standard Time) {}
1: Wed Mar 10 2021 12:00:00 GMT+0100 (Central European Standard Time) {}
2: Wed Mar 17 2021 12:00:00 GMT+0100 (Central European Standard Time) {}
3: Wed Mar 03 2021 12:00:00 GMT+0100 (Central European Standard Time) {}
4: Wed Mar 10 2021 12:00:00 GMT+0100 (Central European Standard Time) {}
5: Wed Mar 17 2021 12:00:00 GMT+0100 (Central European Standard Time) {}

你可以看到重复的，如果我再次点击同一天，结果会是

0: Wed Mar 03 2021 12:00:00 GMT+0100 (Central European Standard Time) {}
1: Wed Mar 10 2021 12:00:00 GMT+0100 (Central European Standard Time) {}
2: Wed Mar 17 2021 12:00:00 GMT+0100 (Central European Standard Time) {}

而不是

[]

提前致谢！

Answer 1

问题在于库传递给单击处理程序的参数是日期，而不是字符串，因此indexOf 不起作用 - 不同的对象彼此不是===，即使它们包含相同的值。因此，找到的索引始终为 -1，并且重复的对象被添加到状态中。

我会创建一个 timestamps（数字）数组，以便轻松检测到重复项：

const [timestamps, setTimestamps] = React.useState([]);

const handleClick = (clickedDate) => {
    const clickedTimestamp = clickedDate.getTime();
    const index = timestamps.indexOf(clickedTimestamp);
    if (index === -1) {
        setTimestamps([...timestamps, clickedTimestamp]);
    } else {
        setTimestamps(
            timestamps.filter((_, i) => i !== index)
        );
    }
};

<DayPicker
    selectedDays={timestamps.map(t => new Date(t))}
    onDayClick={handleClick}
/>

Answer 2

我认为更合适的方法是将所选日期转换为时间戳格式，然后将其与状态进行比较。

const [dates, setDates] = useState([]);

  const handleClick = (day) => {
    let currentDay = new Date(day).getTime();
    let newArray = [...dates];
    let indexItem = newArray.indexOf(currentDay);

    indexItem === -1 ? newArray.push(currentDay) : newArray.splice(indexItem, 1);
    setDates(newArray);
  };

  useEffect(() => {
    console.log(dates);
  }, [dates]);

  const selectedDates = dates && dates.map((date) => new Date(date));

  return <DayPicker selectedDays={selectedDates} onDayClick={handleClick} />;