防止在 React useState 中加载具有默认值的组件答案

【问题标题】：Prevent loading components with default values in React useState防止在 React useState 中加载具有默认值的组件
【发布时间】：2021-12-04 15:31:19
【问题描述】：

我正在使用 typescript react 中的偏移分页。

我有两个包含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 半秒钟，然后将其更改为更新状态，即 @987654333 时更新的状态@钩跑了。因此，在每次加载时，组件都会在从 localStorage 获取的更新状态结束之前刷新默认状态的数据。

有没有一种方法可以使组件仅在状态最终达到其最终值时才加载，并防止每次加载组件时旧状态闪烁半秒？

【问题讨论】：

标签： javascript reactjs typescript react-hooks pagination

【解决方案1】：

useEffect 在组件完全渲染后运行。因此，在此之前，useState 已经用于初始化组件最初渲染所依据的变量。

为防止根据来自useState 的初始化值进行初始渲染，请在useState 和组件中设置为null，并在组件中有条件地渲染元素：

{!currentPage || element}

或

{currentPage && element}

【讨论】：

我不明白你用你展示的例子有条件地渲染元素是什么意思。我应该将哪些值更改为 null，包括 useState 默认值。请您再解释一下好吗？
这意味着您正在根据条件（如果它是真或假）呈现元素。在这种情况下 !null 会给你 true 所以当我们使用 || 并且第一个是 true 时，它不会检查（在这种情况下，渲染）第二个术语。同样对于&&，如果第一个为假（null），它将不检查第二个术语，如果第一个为真，它将呈现元素。
您应该查找条件渲染。它是 React 的一个非常重要的部分（至少）（并且以这种方式使用按位运算符）。在许多情况下都需要它。