.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 中返回的组件添加一个密钥道具。