null initialstate在redux减速器给我一个错误

Question

我有一个photoReducer设置从后端接收数据。但是，我将它的initialstate设置为null(我还将其设置为空数组，这给了我相同的错误)。

我的问题是如何将其设置为初始值，该初始值不会为空或返回错误。

当一个新用户注册时，他们显然没有数据。

这是我的代码的减速器。

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

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

这是我得到的错误。

TypeError: Cannot read property 'photos' of null

Answer 1

在映射之前可以检查它是否存在并且不为空

仅在数组

中存在某些元素时才调用。

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

Answer 2

将initialstate更改为空对象:

PhotosReducer(state = {}, action)