Redux的photoReducer初始值设为null/空数组时报错该如何解决？

问题原因 #

你收到报错的核心原因是reducer的初始值结构和后续使用、更新的结构不匹配：

1. 你的reducer更新逻辑是将state作为对象处理，返回{...state, photos: action.payload}的对象结构，但初始值设为null，当代码尝试读取state.photos时就会触发「null不能读取属性」的报错
2. 你将初始值换成空数组也报错，是因为空数组本身没有photos属性，读取state.photos得到的是undefined，调用map方法同样会报错

解决方案 #

第一步：修正reducer初始值

把初始值设置为和后续更新逻辑匹配的对象结构，photos字段初始设为空数组适配新用户无数据的场景：

export default function PhotosReducer(state = { photos: [] }, action) {
    switch(action.type) {
        case "SetPhotos":
            return {...state, photos: action.payload}
        default:
            return state 
    }
}

第二步：优化渲染逻辑的容错处理

渲染时增加可选链操作，避免极端场景下photos为非数组时触发报错：

return (
    <div className="photos">
        {photos?.map(photo => {
            return <div key={photo.id}>
                <img src={photo.photourl} loading="lazy" alt="pic" onClick={() => clickedPhoto(photo)}/>
            </div>
        })}
        {message && <div className="message">{message}</div>}
    </div>
)

注：如果组件里的photos是直接从state解构取值的，确保取值逻辑为const { photos } = state即可。

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