时间戳

首页 > 解决方案 > 刷新页面时，Array.length 返回未定义

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

问题描述

当我检查长度（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 的代码

购物车.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;

任何帮助是极大的赞赏！

标签： javascriptreactjsnext.js

解决方案

我认为您的错误与 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')始终正确，则可以保留此代码。

推荐阅读