防止在 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}