.map undefined в массиве объекта

Question

Я передаю массив объектов как опору из приложения. js -> searchResult -> TrackList. js. Но когда я применяю функцию .map к массиву объектов, он показывает Невозможно прочитать свойство 'map' неопределенного . Я пробовал разные способы решить эту проблему, но ни один из них не работал. В консоли я получаю значение prop. А мой компонент TRackList. js рендерится четыре раза за один прогон. Вот код

Приложение. js

 this.state = {
      searchResults: [
        {
          id: 1,
          name: "ritik",
          artist: "melilow"
        },
        {
          id: 2,
          name: "par",
          artist: "ron"
        },
        {
          id: 3,
          name: "make",
          artist: "zay z"
        }
      ]

return ( <SearchResults searchResults={this.state.searchResults} /> )

В результатах поиска. js <TrackList tracked={this.props.searchResults} />

В TrackList. js

import React from "react";
import Track from "./Track";
export default class TrackList extends React.Component {
  constructor(props) {
    super();
  }
  render() {
 console.log("here",  this.props.tracked);
    return (
      <div>
        <div className="TrackList">
          {this.props.tracked.map(track => {
            return (<Track track={track} key={track.id} />);
          })}
        </div>
      </div>
    );
  }
}

Вот полный код - https://codesandbox.io/s/jamming-ygs5n?file= / src / components / TrackList. js: 0-431

Answer 1

Вы загружали компонент TrackList дважды. Один раз без переданного свойства, поэтому он был сначала установлен в консоли, а затем выглядит так, как будто он не установлен, но это всего лишь второй журнал. Я обновил ваш код. Взгляните здесь https://codesandbox.io/s/jamming-ddc6l?file= / src / components / PlayList. js

Answer 2

Вы должны добавить searchResults={this.state.searchResults} в свой app.js в список воспроизведения, взять его в список воспроизведения с реквизитом, а затем установить его в список треков из списка воспроизведения (tracked={props.searchResults}).

Кроме того, Typescript мне не помогает делать такие ошибки. Также добавьте ключевую опору к вашему компоненту, которую вы возвращаете в функции map.

Answer 3

Вам необходимо проверить значение this.props.tracked перед реализацией функции карты.

вы можете просто проверить, используя this.props.tracked && следуйте вашему коду.

Answer 4

Вам необходимо убедиться, что this.props.tracked.map существует до l oop.

Ссылка на тестовую среду решения: https://codesandbox.io/s/jamming-spf7f?file= / src / components / TrackList. js

import React from "react";
import Track from "./Track";
import PropTypes from 'prop-types';

export default class TrackList extends React.Component {
  constructor(props) {
    super();
  }
  render() {
    console.log("here", typeof this.props.tracked);
    return (
      <div>
        <div className="TrackList">
           {this.props.tracked && this.props.tracked.map(track => {
            return <Track track={track} key={track.id} />;
          })} 
        </div>
      </div>
    );
  }
}

TrackList.propTypes = {
  tracked: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string,
    artist: PropTypes.string,
  }))
};