ReactJS: жестко запрограммированное состояние с массивом, но по-прежнему возникает ошибка TypeError: невозможно прочитать карту свойства undefined

Question

Я жестко запрограммировал следующий массив с именем searchResults только для тестирования:

function App() {
  const [searchResults, setSearchResults] = useState([{
    name: 'Jamming',
    artist: 'Bob Marley',
    album: 'Jamming',
    id: 0
  }, {
    name: 'Paradise',
    artist: 'Coldplay',
    album: 'One',
    id: 1
  }]);
  const [playlistName, setPlaylistName] = useState('My Playlist');
  const [playlistTracks, setPlaylistTracks] = useState([{
    name: 'Jamming',
    artist: 'Bob Marley',
    album: 'Jamming',
    id: 0
  }]);

  function addTrack(track) {
    if (playlistTracks.some(el => el.id !== track.id)) {
      setPlaylistTracks(playlist => [...playlist, track]);
    } else {
      alert('Track already in the playlist');
    }
  }

  function removeTrack(track) {
    let result = playlistTracks.filter(el => el.id !== track.id);
    setPlaylistTracks(result);
  }

  function updatePlaylistName(name) {
    setPlaylistName(name);
  }

  function savePlaylist() {
    const trackUris = playlistTracks.map(track => track.uri);
  }

  function search(term) {
    console.log(term);
  }

  return (
    <div>
      <h1>Ja<span className="highlight">mm</span>ing</h1>
      <div className="App">
        <SearchBar onSearch={search} />
        <div className="App-playlist">
          <SearchResults 
            searchResults={searchResults} 
            onAdd={addTrack} 
          />
          <Playlist 
            playlistName={playlistName} 
            playlistTracks={playlistTracks} 
            onRemove={removeTrack} 
            onNameChange={updatePlaylistName} 
            onSave={savePlaylist}
          />
        </div>
      </div>
    </div>
  );
}

export default App;

Я передаю searchResults от App. js до TrackList. js. Итак, от приложения к компоненту SearchResults:

import React from 'react';
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';

function SearchResults({ searchResults, onAdd }) {
  return (
    <div className="SearchResults">
      <h2>Results</h2>
      <TrackList searchResults={searchResults} onAdd={onAdd} isRemoval={false} />
    </div>
  );
}

export default SearchResults;

И, наконец, до TrackList. Если я закомментирую в своем TrackList. js, где я отображаю его, я вижу, что результаты searchResults приходят туда правильно:

If I uncomment the line where I do the maping, I get the error below:

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

function TrackList({ searchResults, playlistName, playlistTracks, onAdd, onRemove, isRemoval }) {
  return (
     {searchResults.map (track => )} ); } экспорт TrackList по умолчанию; 

введите описание изображения здесь

Кто-нибудь может увидеть, где я ошибся? Заранее спасибо!

Answer 1

Обнаружил проблему, спасибо всем, кто пытался здесь помочь новичку.

TrackList имеет 2 родительских компонента: SearchResults и Playlist. Я передавал состояния searchResults и playlistTracks с разными именами и сопоставлял только массив searchResults. * треки .

В моем компоненте Playlist: <TrackList tracks={playlistTracks} />

И в моем компоненте SearchResults: <TrackList tracks={searchResults} />

Таким образом, они оба попадают в Tracklist как треков , тогда я могу сопоставить: {tracks.map(track => <Track key={track.id} track={track} onAdd={onAdd} onRemove={onRemove} isRemoval={isRemoval} />)}

Answer 2

<div className="TrackList">
{searchResults && searchResults.length && searchResults.map(track => <Track key={track.id} track={track} onAdd={onAdd} onRemove={onRemove} isRemoval={isRemoval} />)}
</div>

Answer 3

Перед рендером нужно проверить

function TrackList({ searchResults, playlistName, playlistTracks, onAdd, onRemove, isRemoval }) {
  return ({typeof searchResults !== 'undefined' &&
    <div className="TrackList">
      {searchResults.map(track => <Track key={track.id} track={track} onAdd={onAdd} onRemove={onRemove} isRemoval={isRemoval} />)}
    </div>
  });
}