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

Question

我试图在列表中添加日期，并在每次添加新日期时对该列表进行排序。一切都很好，插入每个新数据时都会使用列表，但如果我开始添加此日期13/02/22，重新排序似乎已经停止，新的日期插入将相互叠加/最新插入将是最后一次插入，而不管其实际日期如何。

​

​

以下是我在列表中添加日期时的代码。这里的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]);

这里不介意我代码的其他部分。因为我也有一个功能，您可以批量添加日期。但同时，假设每次单击ADD时只添加一个日期，而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]);