添加特定日期時，使用 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 state 始終為 0。

我不太確定可能是什么問題。 也許我的邏輯中遺漏了一些東西？ 或者這與日期或日期格式有關？ 為什么添加日期13/02/22后排序會出錯？

提前致謝。

Answer 1

嘗試向 Object 添加一個附加屬性，我們稱之為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) => new Date(a.ofi_sorting) - new Date(b.ofi_sorting))
  );
}, [toggleSort]);