Блог

Я работаю над проектом Codecademy, создаю Jammming, создаю плейлист с помощью Spotify API. Я искал все в Интернете, другие репозитории, видео, и я все еще продолжаю получать ошибку сопоставления. Я не уверен, в чем дело? Есть идеи?

Опубликовано на github здесь: https://github.com/carriepresley/jammming

 import React from "react";
import "./TrackList.css";
import Track from "../Track/Track";




class TrackList extends React.Component {
    render(){
        return (
            <div className="TrackList">
            {this.props.tracks.map((track) =>{
                    return <Track 
                    key = {track.id}
                    track = {track}
                    />
                })
            }
            </div>
        )
    }
}
export default TrackList;
  

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

Есть несколько способов убедиться, что это не приведет к сбою вашего приложения.

Быстрый и грязный способ — просто проверить, что данные соответствуют действительности, прежде чем обращаться к свойствам : data amp;amp; data.map . Я рекомендую делать это только в том случае, если нет лучшего способа, иногда это может скрыть ошибку, а не исправить ее.

Лично я считаю, что лучше всего убедиться, что ваши переменные по умолчанию имеют пустые структуры, представляющие, как будут выглядеть данные. Похоже, вы уже делаете это в своем App.js , устанавливая по умолчанию оба searchResults и playlistTracks быть массивами в состоянии.

Причина, по которой я предпочитаю это, заключается в том, что теперь, если вы все еще получаете ошибку, вы знаете, что проблема не в асинхронной проблеме, а в чем-то другом. Например, забыть передать prop на несколько уровней выше (App.js ):

 <SearchResults searchResults = {this.state.searchResults}/>
//<Playlist/> 
<Playlist tracks={this.state.playlistTracks} /> // Pass it the prop it needs
  

Playlist пытается указать TrackList реквизит tracks from this.props.tracks , но ему никогда не давался этот реквизит from App.js , поэтому он не определен.

 <TrackList tracks = {this.props.tracks}/> // this.props.tracks is undefined from App
  

Вот почему у вас ошибка «Не удается прочитать свойство .map неопределенного». Простая проверка, this.props.tracks не определено ли значение undefined, остановит ошибку, но скроет ошибку!

попробуйте :

   <div className="TrackList">
        {this.props.tracks amp;amp; this.props.tracks.map((track) =>{
                return <Track 
                key = {track.id}
                track = {track}
                />
            })
        }
        </div>
  

Для решения проблемы: дорожка 34 выдает ошибку тем, кто следит за пошаговым видео Причина: дорожка 32 повторяется в видео 2 раза, поэтому дорожка 33 отсутствует в пошаговом видео

Решение:

Внутри App.js Найти

 <Playlist/>
  

изменение в

 <Playlist searchResults={this.state.searchResults}/>
  

Внутри Playlist.js найти

 <TrackList />
  

изменение в

 <TrackList tracks={this.props.searchResults}/>