防止在React useState中加载默认值的组件

Question

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

我有两个状态包含pageNumber和offset。默认页面设置为1，默认偏移量设置为0，如下所示。

useStateHook

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

加载时，组件从localStorage中获取pageNumber和calculatedOffset，并更新useState值的默认值。

useEffectHook

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，有条件地渲染元素:

{!currentPage || element}

或

{currentPage && element}