Блог

Главная - Вопросы по программированию - нулевое начальное состояние в редукторе redux выдает мне ошибку

нулевое начальное состояние в редукторе redux выдает мне ошибку

#reactjs #redux #react-redux

Вопрос:

У меня есть фоторедактор, настроенный для приема данных с серверной части. Однако я установил его начальное состояние равным нулю (я также установил его в пустой массив, что дало мне ту же ошибку).

Мой вопрос в том, как я могу установить для него начальное значение, которое не будет равно нулю или возвращать ошибку.

Когда новый пользователь зарегистрируется, у него, очевидно, не будет никаких данных.

Вот мой код для редуктора.

 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 amp;amp; <div className="message">{message}</div>}
        </div>
        )
}

Это ошибка, которую я получаю.

 TypeError: Cannot read property 'photos' of null

Комментарии:

1. Это обычная и хорошая практика, которую следует использовать null при отсутствии данных . в чем заключается ошибка ? Также добавьте код, который выдает вам ошибку .

2. Я отредактирую вопрос с ошибкой.

3. Добавьте код, который выдает вам ошибку .

Ответ №1:

Перед сопоставлением вы можете проверить, существует ли оно и не пусто ли

таким образом, карта вызывается только в том случае, если в массиве есть несколько элементов

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

Ответ №2:

Просто измените initialstate на пустой объект:

 PhotosReducer(state = {}, action)
Метки: