防止在 React useState 中加載具有默認值的組件

Question

我正在打字稿反應中使用偏移分頁。

我有兩個包含pageNumber和offset 。 默認頁面設置為1 ，默認偏移設置為0 ，如下所示。

useState鈎子

  const [currentPage, setCurrentPage] = useState(1);
  const [calculatedOffset, setCalculatedOffset] = useState(0);

加載時，組件從localStorage獲取pageNumber和calculatedOffset並更新 useState 值的默認值。

useEffect掛鈎

  useEffect(() => {
    if (typeof window !== "undefined") {
      const integerPage = parseInt(localStorage.getItem("currentPage") || "1");
      setCurrentPage(integerPage);

      const integerOffset = parseInt(localStorage.getItem("calculatedOffset") || "0");
      setCalculatedOffset(integerOffset);
    }
  }, []);

問題：

我面臨的問題是，每當組件加載時，它都會加載默認狀態的值，即pageNumber: 1, calculatedOffset: 0半秒，然后將其更改為更新狀態，即useEffect時更新的狀態鈎跑了。 因此，在每次加載時，組件都會在從 localStorage 獲取的更新狀態結束之前刷新默認狀態的數據。

有沒有一種方法可以讓組件僅在狀態最終達到最終值時加載，並防止每次加載組件時舊狀態閃爍半秒？

Answer 1

useEffect在組件完全渲染后運行。 所以在這之前， useState已經被用來初始化你的組件最初呈現的變量。

為了防止根據useState的初始化值進行初始渲染，在useState和組件中將兩者都設置為null ， useState渲染元素：

{!currentPage || element}

或者

{currentPage && element}