类型错误：无法读取未定义 React 的属性“标签”

Question

您好，我正在使用 iTunes Api 获取排名前 100 的电影。这就是它在控制台中的外观：

我试图获取summary.label，但我得到“TypeError：无法读取未定义的属性‘标签’”

下面是我的代码示例

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>

    )

  }

}

当我尝试{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

该记录没有摘要对象。if您可以通过添加andconsole.log内部map函数来检查这一点：return this.state.movies.map((item) => {&nbsp; &nbsp; &nbsp; if (!item.summary) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(item); // here&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div key={item.title.label}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>{item.title.label}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>{item.category.attributes.term}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src={item["im:image"][2].label} alt={item.title.label} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <video&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onMouseEnter={this.mouseEnter}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onMouseLeave={this.mouseLeave}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; controls&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <source src={item.link[1].attributes.href} type="video/x-m4v" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </video>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item.summary ? <div>{item.summary.label}</div> : null}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; });你应该像这样显示它：{item.summary ? <div>{item.summary.label}</div> : null}