类型错误：无法读取未定义 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) => {

      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}