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

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

javascript reactjs next.js

Javascript 刷新页面时，Array.length返回未定义,javascript,reactjs,next.js,Javascript,Reactjs,Next.js,我有一个数组，当我检查长度（array.length）时返回undefined，只有页面被刷新如果我在chrome中的一个新选项卡中打开本地环境，一切都会正常工作，并获得阵列的长度。只有在刷新页面一次后，页面才会崩溃，并且我得到以下错误： TypeError:无法读取未定义的属性'length' 我正在为项目使用React、React的上下文API（我从上下文提供程序获取数组）和Nextjs。我觉得这个问题与SSR有关，但我不能完全确定以下是与问题相关的代码上下文提供程序 export f

我有一个数组，当我检查长度（array.length）时返回undefined，只有页面被刷新

如果我在chrome中的一个新选项卡中打开本地环境，一切都会正常工作，并获得阵列的长度。只有在刷新页面一次后，页面才会崩溃，并且我得到以下错误： TypeError:无法读取未定义的属性'length'

我正在为项目使用React、React的上下文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>
    );
}

导出函数提供程序（道具）{
让房地产草签；
如果（窗口类型！==“未定义”）{
initializeState=JSON.parse（sessionStorage.getItem（'cart'）；
if（initializeState===null）{
InitializeEstate=[]；
}
}
//设置购物车
const[cart，setCart]=useState（initializeState）；
返回(
{props.children}
);
}

这就是使用上下文提供程序的代码

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;

import React，{Fragment，useContext}来自'React'；
从“../components/ShoppingCart”导入ShoppingCart；
从“../contents/CartContext”导入{CartContext}；
常量车=（）=>{
const{cart}=useContext（CartContext）；
返回(
{cart.length！==0(
) : (
你的车是空的
)}
);
};
导出默认购物车；

非常感谢您的帮助

这是一个异步问题。该变量在评估时未初始化，因此您可以获得：

“TypeError:无法读取未定义的属性'length'”

使用提供者时，请尝试应用保护模式，如下所示：

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.length！==0”的结果

否则返回false

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