React使用Redux时报TypeError: Cannot read property 'address' of null如何解决

• 核心问题出在store.js的拼写错误：你判断localStorage是否存在收货地址时用的key是shippingAddress，但后续JSON.parse取值时错误写成了shippingAdress（正确拼写为Address，少写了第二个d），所以当localStorage里有对应字段时，读取错误key会返回null，导致redux初始化时shippingAddress被赋值为null，渲染页面时读取null.address就会抛出你遇到的类型错误。删除localStorage后代码会走默认空对象逻辑，所以功能恢复正常。
• 次要问题是代码健壮性不足：ShippingScreen组件中直接读取shippingAddress的属性，没有做空值兼容，只要shippingAddress为空就会报错。

修复步骤 #

步骤1：修正store.js的拼写错误 #

把store.js中读取收货地址的代码：

const shippingAddressFromStorage = localStorage.getItem('shippingAddress')
? JSON.parse(localStorage.getItem('shippingAdress'))
: {};

替换为正确拼写的版本：

const shippingAddressFromStorage = localStorage.getItem('shippingAddress')
? JSON.parse(localStorage.getItem('shippingAddress'))
: {};

步骤2：给ShippingScreen添加空值兼容 #

修改ShippingScreen中状态初始化的代码，用可选链+空值合并运算符兜底，避免shippingAddress为空时报错：

const [address, setAddress] = useState(shippingAddress?.address ?? '');
const [city, setCity] = useState(shippingAddress?.city ?? '');
const [postalCode, setPostalCode] = useState(shippingAddress?.postalCode ?? '');
const [country, setCountry] = useState(shippingAddress?.country ?? '');

另外你粘贴的cartAction.js代码和cartReducer完全重复，属于粘贴失误，自己替换成正确的action代码即可，不影响本次问题的修复。

内容的提问来源于stack exchange，提问作者Nuruddin Kawsar