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

Question

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

如果我在 chrome 的新选项卡中打开我的本地环境，一切正常，并且我得到了数组的长度。只有在刷新页面一次后，页面才会崩溃，我收到以下错误： "类型错误： 无法读取未定义的属性'长度'"。

我正在使用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>
);
}

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

购物车.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 运行代码，初始化状态将收到未定义。
但是初始化状态应该是你预期的数组。
所以，我建议你改变你的代码：

// 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

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

"类型错误： 无法读取未定义的属性'长度' ">

尝试在使用提供程序时应用保护模式，如下所示：

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)

翻译为：

当符号"购物车"的计算结果为真实值时，

然后返回表达式 "cart.length ！== 0" 的结果，

否则返回假

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