Javascript TypeError:无法读取属性'；标签'；未定义的反应

您好，我正在使用iTunes Api获取前100部电影。这是它在console中的外观：

我正在尝试获取summary.label，但得到“TypeError:无法读取未定义的属性'label'”

下面是我的代码示例

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>
    )
  }
}

从“/styles”导入{MoviesList、MoviesListEl、Title、VideoWrap、MediaWrap、MovieDesc、MobilePreview}
导出默认类FetchReact.Component{
状态={
加载：对，
电影：[]
}
异步组件didmount（）{
常量url=”https://itunes.apple.com/us/rss/topmovies/limit=100/json"
const response=等待获取（url）
const data=wait response.json（）
this.setState（{movies:data.feed.entry，loading:false}）
console.log（data.feed.entry）
if（data.feed.entry）{
//log（data.feed.entry.summary.label）
console.log（data.feed.entry[0].summary.label）
}
}
mouseEnter=e=>{
e、 currentTarget.play（）
this.setState（{isPlaying:true}）
//控制台日志（e）
}
mouseLeave=e=>{
e、 currentTarget.pause（）
e、 currentTarget.load（）
this.setState（{isPlaying:true}）
//控制台日志（e）
}
render（）{
if（this.state.loading）{
返回加载。。。
}
如果（！this.state.movies.length）{
我没拍电影
}
返回(
{this.state.movies.map（项=>(
{item.title.label}
{item.category.attributes.term}
{item.summary.label}
))}
)
}
}

当我尝试

{item.summary.label}

时，会出现错误。但是

{item.title.label}

工作正常。 与console.log类似：

console.log（data.feed.entry.summary.label）

抛出错误，但

console.log（data.feed.entry[0].summary.label）

工作正常

这很奇怪，因为当我早上工作的时候，一切都很好。现在，当我开始“npm”时，这个问题发生了。API有什么问题吗？为什么我无法获取此

摘要.标签

提前谢谢你

此记录没有摘要对象。 例如，您可以通过在

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>
      );
    });

返回此.state.movies.map（（项）=>{
如果（！item.summary）{
console.log（item）；//此处
}
返回(
{item.title.label}
{item.category.attributes.term}
{item.summary？{item.summary.label}:null}
);
});

您应该这样显示它：

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

{item.summary？{item.summary.label}:null}

感谢您的帮助，现在它工作得很好。我只是好奇这怎么能在没有错误的情况下工作：）@sosick