Ошибка типа: невозможно прочитать свойство '0' из неопределенного.Приложение React Redux - PullRequest
Новая
       7

Ошибка типа: невозможно прочитать свойство '0' из неопределенного.Приложение React Redux

0 голосов
/ 08 июня 2018

Я получаю эту ошибку в своем коде.Я могу прочитать правильное состояние из моего расширения Redux Chrome.Я не знаю, откуда возникла ошибка.Я думаю, это исходит от.

TopTracks.propTypes = {
  getHashParams: PropTypes.func.isRequired,
  getMyTopTracks: PropTypes.func.isRequired,      
  myTopTracks: PropTypes.arrayOf(PropTypes.object),
}

const mapStateToProps = state => ({
  myTopTracks: state.music.myTopTracks
})

Правильно ли я управлял mapStateToProps и PropTypes?Потому что нет никаких признаков содержания его объекта: myTopTrackName и myTopTrackImage

Вот полный код: 

class TopTracks extends Component{
  componentWillMount(){
    this.props.getMyTopTracks(getHashParams())
  }
  render(){
    let link = `${ window.location.href }`
    link = `/prueba/${link.substring(link.indexOf('#'))}`
    return(
      <div className="TopTracks">
          Now Playing: { this.props.myTopTracks[0].myTopTrackName }
          <img src={ this.props.myTopTracks[0].myTopTrackImage } alt="Top Track Album" style={{ width: 300 }} />
          <Button href={ link }>Continue</Button>
      </div>
    )
  }
}

TopTracks.propTypes = {
  getHashParams: PropTypes.func.isRequired,
  getMyTopTracks: PropTypes.func.isRequired,      
  myTopTracks: PropTypes.arrayOf(PropTypes.object),
}

const mapStateToProps = state => ({
  myTopTracks: state.music.myTopTracks
})

export default connect(mapStateToProps, { getHashParams, getMyTopTracks } )( TopTracks )

1 Ответ

0 голосов
/ 08 июня 2018

Если ошибка исходит из показанного кода, это означает, что this.props.myTopTracks равно undefined, что в свою очередь означает, что state.music.myTopTracks равно undefined.

Настоящая проблема в приложенииначальное состояние.Посмотрите на ваши редукционные редукторы и убедитесь, что ваше начальное состояние устанавливает myTopTracks в пустой массив, [].Это обычный безопасный способ инициализации состояния приложения перед извлечением реального списка с сервера.

Вам также все равно нужно будет изменить код представления для учета пустого списка, поскольку myTopTracks[0]будет undefined, если список пуст.Одним из способов решения этой проблемы является создание безопасного первого объекта по умолчанию в списке, который будет заменен входящими данными из выборки, такими как: 

{
  myTopTracks: [{
    myTopTrackName: 'Loading...',
    myTopTrackImage: ''
  }]
}

Другой метод заключается в проверке длины списка.и, если оно пустое, создайте что-то еще, например, спиннер.Это действительно зависит от требований к дизайну вашего приложения на данный момент.Но это два варианта.

...