redux reducer 中的 null initialstate 给了我一个错误答案

【问题标题】：null initialstate in redux reducer is giving me an errorredux reducer 中的 null initialstate 给了我一个错误
【发布时间】：2021-09-02 12:33:18
【问题描述】：

我设置了一个 photoReducer 来从后端接收数据。但是，我将它的初始状态设置为 null（我还将它设置为一个空数组，这给了我同样的错误）。

我的问题是如何将其设置为不为 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

【问题讨论】：

在没有数据时使用null 是一种常见且良好的做法。错误是什么？还要添加给你错误的代码。
我会编辑带有错误的问题。
添加引发错误的代码。

标签： reactjs redux react-redux

【解决方案1】：

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

这种方式只有在数组中有一些元素时才会调用map

 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>
        )
}

【讨论】：

【解决方案2】：

只需将初始状态更改为空对象：

PhotosReducer(state = {}, action)

【讨论】：