React+Redux电商项目重登后配送页报Cannot read property 'address' of null

问题根因 #

你遇到的报错核心是两个问题：

1. store.js 中读取本地存储配送地址的key拼写错误，导致读取到null值赋值给了Redux中的shippingAddress
2. 页面读取shippingAddress的属性时没有做非空兜底判断，当shippingAddress为null时直接取.address就会抛出你遇到的类型错误

修复步骤 #

1. 修复store.js的拼写错误

找到store.js中读取shippingAddress的代码段，把拼写错误的sgippingAddress改为正确的shippingAddress：

// 修正前错误代码
const shippingAddressFromStorage = localStorage.getItem('shippingAddress') ? 
    JSON.parse(localStorage.getItem('sgippingAddress')) : {}

// 修正后代码
const shippingAddressFromStorage = localStorage.getItem('shippingAddress') ? 
    JSON.parse(localStorage.getItem('shippingAddress')) : {}

这里你前面判断本地存在shippingAddress这个key，却去读取拼写错误的sgippingAddress，必然会拿到null，JSON.parse(null)返回的也是null，最终导致Redux中shippingAddress被初始化为null而不是默认空对象。

2. 给ShippingScreen加非空兜底

在ShippingScreen.js中读取shippingAddress时加上默认空对象，初始化表单值时用可选链加兜底值，避免后续再出现同类报错：

// 修正前代码
const { shippingAddress } = cart
const [address, setAddress] = useState(shippingAddress.address)
// 其余字段同理

// 修正后代码
const { shippingAddress = {} } = cart // 解构时加默认空对象
const [address, setAddress] = useState(shippingAddress?.address || '')
const [phone, setPhone] = useState(shippingAddress?.phone || '')
const [city, setCity] = useState(shippingAddress?.city || '')
const [postalCode, setPostalCode] = useState(shippingAddress?.postalCode || '')
const [country, setCountry] = useState(shippingAddress?.country || '')

3. 补充退出登录的清理逻辑

你当前退出登录时大概率没有清理本地存储中关联用户的数据，建议在退出登录的action中添加如下代码，避免不同账号登录时串数据：

// 退出登录action中添加
localStorage.removeItem('userInfo')
localStorage.removeItem('shippingAddress')
localStorage.removeItem('paymentMethod')
localStorage.removeItem('cartItem')

额外隐藏问题修复 #

你还存在购物车数据无法持久化的隐藏bug：cartAction中存储购物车的key是cartItem，但store.js初始化时读取的key是cartItems，两边拼写不一致，建议统一即可：

// 方案1：修改store.js读取逻辑
const cartItemsFromStorage = localStorage.getItem('cartItem') ? 
    JSON.parse(localStorage.getItem('cartItem')) : []

// 方案2：修改cartAction中addTocart、removeFromCart的存储key为cartItems
localStorage.setItem('cartItems' , JSON.stringify(getState().cart.cartItems))

内容的提问来源于stack exchange，提问作者Mohammad Touhidul Islam