TypeError：无法读取未定义 React 的属性“标签”

Question

嗨，我正在使用 iTunes Api 获取前 100 部电影。这是它在控制台中的外观：

我正在尝试获取 summary.label，但我收到“TypeError: Cannot read property 'label' of undefined”

下面是我的代码示例

import { MoviesList, MoviesListEl, Title, VideoWrap, MediaWrap, MovieDesc, MobilePreview } from "./styles"

export default class FetchRandomMovies extends React.Component {
  state = {
    loading: true,
    movies: []
  }

  async componentDidMount() {
    const url = "https://itunes.apple.com/us/rss/topmovies/limit=100/json"
    const response = await fetch(url)
    const data = await response.json()

    this.setState({ movies: data.feed.entry, loading: false })
    console.log(data.feed.entry)
    if (data.feed.entry) {
      // console.log(data.feed.entry.summary.label)
      console.log(data.feed.entry[0].summary.label)
    }
  }

  mouseEnter = e => {
    e.currentTarget.play()
    this.setState({ isPlaying: true })
    // console.log(e)
  }
  mouseLeave = e => {
    e.currentTarget.pause()
    e.currentTarget.load()
    this.setState({ isPlaying: true })
    // console.log(e)
  }

  render() {
    if (this.state.loading) {
      return <div>loading...</div>
    }

    if (!this.state.movies.length) {
      return <div>didn't get movies</div>
    }
    return (
      <MoviesList id="top100">
        {this.state.movies.map(item => (
          <MoviesListEl key={item.title.label}>
            <Title>
              <span>{item.title.label}</span>
              <span>{item.category.attributes.term}</span>
            </Title>
            <MediaWrap>
              <img src={item["im:image"][2].label} alt={item.title.label} />
              <VideoWrap>
                <video onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave} controls>
                  <source src={item.link[1].attributes.href} type="video/x-m4v" />
                </video>
              </VideoWrap>
            </MediaWrap>
            <MovieDesc>{item.summary.label}</MovieDesc>
            <MobilePreview href={item.link[1].attributes.href} />
          </MoviesListEl>
        ))}
      </MoviesList>
    )
  }
}

当我尝试{item.summary.label} 时出现错误。但是{item.title.label} 工作正常。 与 console.logs 类似： console.log(data.feed.entry.summary.label) 抛出错误，但 console.log(data.feed.entry[0].summary.label) 工作正常。

这很奇怪，因为我早上工作时一切正常。现在，当我执行“npm start”时，这个问题就发生了。 API有问题吗？为什么我不能得到这个summary.label？

提前谢谢你

Answer 1

此记录没有摘要​​对象。 例如，您可以通过在 map 函数中添加 if 和 console.log 来检查这一点：

return this.state.movies.map((item) => {
      if (!item.summary) {
        console.log(item); // here
      }
      return (
        <div key={item.title.label}>
          <div>
            <span>{item.title.label}</span>
            <span>{item.category.attributes.term}</span>
          </div>
          <div>
            <img src={item["im:image"][2].label} alt={item.title.label} />
            <div>
              <video
                onMouseEnter={this.mouseEnter}
                onMouseLeave={this.mouseLeave}
                controls
              >
                <source src={item.link[1].attributes.href} type="video/x-m4v" />
              </video>
            </div>
          </div>
          {item.summary ? <div>{item.summary.label}</div> : null}
        </div>
      );
    });

你应该这样显示它：

{item.summary ? <div>{item.summary.label}</div> : null}