Я работаю над этой ошибкой в течение нескольких часов, и я думаю, что сузил ее до следующих фрагментов кода:
// мой контейнер сведений о треке:
import { connect } from 'react-redux';
import TrackDetail from './track_detail';
import { selectTracksFromPlaylist } from '../../reducers/selectors';
const mapStateToProps = (state, { playlistId }) => ({
tracks: selectTracksFromPlaylist(state, state.entities.playlists[playlistId])
});
экспорт по умолчанию connect (mapStateToProps) (TrackDetail);
// мой компонент представления деталей дорожки:
import React from 'react';
import TrackIndexItem from './track_index_item';
const TrackDetail = ({ tracks }) => (
<ul>
{ tracks.map(track => <TrackIndexItem key={track.id} track={track} />) }
</ul>
);
export default TrackDetail;
// мой селектор, который я использую для выбора всех дорожек из списка воспроизведения:
export const selectTracksFromPlaylist = (state, playlist) => (
playlist.track_ids.length > 0 ? playlist.track_ids.map(id => state.entities.tracks[id]) : []
);
// компонент, который отображает мой TrackDetail
:
import React from 'react';
import { Route } from 'react-router-dom';
import TrackDetail from '../track/track_detail_container';
class PlaylistDetail extends React.Component {
componentDidMount() {
this.props.requestSinglePlaylist(this.props.match.params.playlistId);
}
render() {
const { playlist } = this.props;
if (!playlist) return null;
return (
<div className="playlist-detail-container">
<div className="playlist-detail-header">
<p>Playlist</p>
<h1>{ playlist.title }</h1>
<p>
Created by <span>{playlist.user}</span> • {playlist.track_ids.length} songs
</p>
</div>
<div className="playlist-detail-tracks">
<TrackDetail playlistId={ playlist.id } />
</div>
</div>
);
}
}
export default PlaylistDetail;
Это происходит каждый раз, когда я пытаюсь получить доступ к странице в обычном режиме (без физического обновления; если я обновлю sh экран после того, как эта ошибка выскакивает, это работает):
Uncaught TypeError: Cannot read property 'id' of undefined