刷新页面时，Array.length 返回未定义

Question

当我检查长度 (array.length) 时，我有一个数组返回未定义，只有页面被刷新。

如果我在 chrome 的新选项卡中打开本地环境，一切正常，并且我得到数组的长度。仅在刷新页面一次后，页面崩溃并且我收到以下错误： “TypeError：无法读取未定义的属性‘长度’”。

我正在为项目使用 React、React 的 Context API（我从上下文提供程序获取数组）和 Nextjs。我感觉这个问题与 SSR 有关，但我不完全确定。

这是与问题相关的相关代码。

上下文提供者

export function CartProvider(props) {
    let initializeState;
    if (typeof window !== 'undefined') {
        initializeState = JSON.parse(sessionStorage.getItem('cart'));
        if (initializeState === null) {
            initializeState = [];
        }
    }

    // Sets the cart
    const [ cart, setCart ] = useState(initializeState);
    return (
        <CartContext.Provider
            value={{ cart, setCart, checkCart, addItem, deleteItem, quantityIncrease, quantityDecrease }}
        >
            {props.children}
        </CartContext.Provider>
    );
}

这是使用 Context Provider 的代码

Cart.js

import React, { Fragment, useContext } from 'react';
import ShoppingCart from '../components/ShoppingCart';
import { CartContext } from '../contexts/CartContext';
const cart = () => {
    const { cart } = useContext(CartContext);

    return (
        <Fragment>
            {cart.length !== 0 ? (
                <ShoppingCart />
            ) : (
                <div>
                    <h1>Your cart is empty</h1>
                </div>
            )}
        </Fragment>
    );
};

export default cart;

非常感谢任何帮助！

Answer 1

我认为您的错误与 SSR 有关。
如果您使用 SSR 运行代码，initializeState 将收到 undefined。
但 initializeState 应该是您所期望的 Array。
所以，我建议你改变你的代码：

// Change
    let initializeState;
    if (typeof window !== 'undefined') {
        initializeState = JSON.parse(sessionStorage.getItem('cart'));
        if (initializeState === null) {
            initializeState = [];
        }
    }

// To
    let initializeState = [];
    if (typeof window !== 'undefined' && sessionStorage.getItem('cart')) {
        initializeState = JSON.parse(sessionStorage.getItem('cart'));
    }

您可以通过在调用 JSON.parse 时捕获错误来使代码更安全。但是，如果您确保 sessionStorage.getItem('cart') 始终正确，则可以保留此代码。

Answer 2

这是一个异步问题。该变量在评估时未初始化，这就是您获得的方式：

“TypeError: 无法读取未定义的属性‘长度’”

当您像这样使用提供者时尝试应用保护模式：

import React, { Fragment, useContext } from 'react';
import ShoppingCart from '../components/ShoppingCart';
import { CartContext } from '../contexts/CartContext';
const cart = () => {
    const { cart } = useContext(CartContext);

    return (
        <Fragment>
            {(cart && (cart.length !== 0)) ? (
                <ShoppingCart />
            ) : (
                <div>
                    <h1>Your cart is empty</h1>
                </div>
            )}
        </Fragment>
    );
};

export default cart;

快速解释：

cart && (cart.length !== 0)

翻译为：

当符号“购物车”的计算结果为 truthy 值时，

THEN 返回表达式“cart.length !== 0”的结果，

否则返回错误

这样你就可以在运行时“保护”不安全的代码。