javascript - 如何在 React 中访问 API 对象属性？

Question

我在使用 React 访问对象时遇到问题。该对象是使用 tMDB API 生成的。一旦我可以访问该对象，我想将 ID 属性传递给子组件。

首页:

import React, {Component} from 'react'
import Movie from '../components/Movie'
import '../index.css'

class Home extends Component{

  constructor(props) {
    super(props)
    this.state = {
      movie: [],
    }
  }

  componentDidMount() {
    this.fetchData()
  }

  fetchData(){
    fetch('https://api.themoviedb.org/3/movie/now_playing?api_key=17c21a1abd8ae7be6ee8986389011906')
      .then(response=> response.json())
      .then( ({results: movie}) => this.setState({movie}))
  }

  render() {

    console.log(this.state.movie[1].id);

    return(
        <div className="main">
          <div>

         </div>
        </div>
    )
  }
}

export default Home

此输出TypeError:无法读取未定义的属性“id”

如果我更改this.state.movi​​e[1].id到 this.state.movi​​e[1] 我可以看到完整的对象及其属性，但无法访问代码中的子属性。

我认为问题可能是 React 渲染状态两次，因为电影对象上方有一个“未定义”对象。如果是这样，我该如何解决这个问题？

控制台:

Array(0)
length
:
0
__proto__
:
Array(0)
Home.js:26 

Array(20)
0:
{vote_count: 4600, id: 284053, video: false, vote_average: 7.4, title: "Thor: Ragnarok", …}
1:
{vote_count: 2314, id: 284054, video: false, vote_average: 7.4, title: "Black Panther", …}
2:
{vote_count: 771, id: 337167, video: false, vote_average: 6.3, title: "Fifty Shades Freed", …}
...

Answer 1

您必须验证电影是否为空，因为您的 api 调用需要一些时间才能获得响应。请记住，每次使用 setState 修改状态时，React 都会重新渲染您的组件

render() {
    if (this.state.movie.length === 0) {
     return (<div>Loading data...</div>)
    }

    console.log(this.state.movie[1].id);

    return(
        <div className="main">
          <div>

         </div>
        </div>
    )
  }