添加特定日期时使用 React.useState 的数组排序中断

Question

我试图在列表中添加一个日期，并在每次添加新日期时对该列表进行升序排序。一切都很好，插入每个新数据时都会对列表进行排序，但是如果我开始添加这个日期 13/02/22，重新排序似乎已经停止，新的日期插入将堆叠到每个other/latest 无论实际日期如何，插入将是最后一次。

这是我在列表中添加日期时的代码。而这里的useEffect就是我的排序逻辑。如您所见，我通过调用 setAddedOpens 对日期列表进行排序，它是 React.useState.

const [addedOpens, setAddedOpens] = React.useState(defaultOpens);
 const [toggleSort, setToggleSort] = React.useState(false);

      const _addOpens = () => {
        for (let week = 0; week <= repeatWeeks; week++) {
          const OFI = new Date(getValues('OFIdate'));
    
          setAddedOpens((prevOpens) => [
            ...prevOpens,
            {
              ofi: format(OFI.setDate(OFI.getDate() + 7 * week), 'dd/MM/yyyy'),
              start: format(getValues('startTime'), 'hh:mm a'),
              end: format(getValues('endTime'), 'hh:mm a')
            }
          ]);
        }
    
        setToggleSort((toggle) => !toggle);
      };
    
      React.useEffect(() => {
        setAddedOpens([...addedOpens].sort((a, b) => new Date(a.ofi) - new Date(b.ofi)));
      }, [toggleSort]);

不要介意我这里代码的其他部分。因为我还有一个功能，你可以批量添加日期。但与此同时，假设我每次单击“添加”时都只是添加一个日期，并且 repeatWeeks 状态始终为 0。

我不太确定问题出在哪里。也许我在逻辑上遗漏了什么？或者这与日期或日期格式有关？为什么添加日期 13/02/22 后排序会出错？

提前致谢。

Answer 1

尝试向对象添加一个额外的属性，我们称之为 ofi_sorting，以 yyyy-MM-dd 格式存储日期并使用该字段对值进行排序：

    setAddedOpens((prevOpens) => [
      ...prevOpens,
      {
        ofi: format(OFI.setDate(OFI.getDate() + 7 * week), 'dd/MM/yyyy'),
        ofi_sorting: format(OFI.setDate(OFI.getDate() + 7 * week), 'yyyy-MM-dd'),
        start: format(getValues('startTime'), 'hh:mm a'),
        end: format(getValues('endTime'), 'hh:mm a'),
      },
    ]);
  }

  setToggleSort((toggle) => !toggle);
};

React.useEffect(() => {
  setAddedOpens(
    [...addedOpens].sort((a, b) => a.ofi_sorting - b.ofi_sorting)
  );
}, [toggleSort]);

添加特定日期时使用 React.useState 的数组排序中断

Array sort with React.useState breaks when adding certain date

javascript

reactjs

date

sorting

date-fns