刷新页面时 Array.length 返回未定义
我有一个数组，当我检查长度（array.length）时，它返回未定义，只有页面被刷新。
如果我在 chrome 的新选项卡中打开本地环境，一切都正常，我得到了数组的长度。只有在刷新页面一次后，页面崩溃，我得到以下错误：“TypeError：无法读取未定义的属性‘length’”。
我正在为项目使用 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>
);
}
这是使用上下文提供程序的代码
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;
如能得到任何帮助我们将不胜感激！
我认为您的错误与 SSR 有关。
如果您使用 SSR 运行代码，initializeState 将收到未定义。
但正如您所期望的那样，initializeState 应该是数组。
因此，我建议您更改代码：
// 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')
始终正确，则可以保留此代码。
这是异步性的问题。变量在评估时未初始化，这就是您获得以下内容的方式：
"TypeError: Cannot read property 'length' of undefined"
尝试在使用提供程序时应用保护模式，如下所示：
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)
转换为：
WHEN symbol "cart" evaluates to a truthy value,
THEN return the result of the expression "cart.length !== 0",
ELSE return false
这样，您就可以在运行时“保护”不安全的代码。