.map 在 object 數組上未定義

Question

我正在傳遞 object 數組作為來自 App.js -> searchResult -> TrackList.js 的道具。 但是當我在 object 的數組上申請時，它顯示無法讀取屬性“映射”的未定義。 我嘗試了不同的方法來解決這個問題，但都沒有奏效。 在控制台中，我得到了道具的價值。 我的 TTrackList.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} /> )

在 Searchresult.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

您正在加載 Component TrackList兩次。 有一次沒有通過任何屬性，這就是為什么它首先在控制台中設置然后看起來它沒有設置，但它只是第二個日志。 我已經更新了你的代碼。 看看這里https://codesandbox.io/s/jamming-ddc6l?file=/src/components/PlayList.js

Answer 2

您需要在循環之前檢查 this.props.tracked.map 是否存在。

解決方案沙箱鏈接： 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,
  }))
};

Answer 3

在實現 map function 之前，您需要檢查 this.props.tracked 的值。

您可以使用this.props.tracked &&簡單地檢查您的代碼。

Answer 4

您應該在app.js中將searchResults={this.state.searchResults}添加到播放列表中，將其放入帶有道具的播放列表中，然后從播放列表（ tracked={props.searchResults} ）中將其設置在 TrackList 中。

另外，Typescript 幫助我不要犯這樣的錯誤。 此外，向您在map function 中返回的組件添加一個密鑰道具。