我尝试获取数据 com The Movie db api 但出现此错误：“TypeError: Cannot read property '0' of null”

Question

我想从 The Movie DB api 中检索数据并只显示 4 部电影，但由于某种原因它什么也没得到。

import React, {Component} from 'react';
import './App.css';
class App extends Component{

state = {
 popularMovies: null
}

async retrievePopularMovies(){
  const url = 'https://api.themoviedb.org/3/movie/popular?api_key=KEY_HERE';
  const response = await fetch(url);
  const data = await response.json();
  this.setState({popularMovies: data.results});
}
render(){
    return(
      <div>
      <h3>Popular Movies</h3>
      <div>
        {this.state.popularMovies[0].title}
      </div>

      </div>
    )
  }
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

它应该在屏幕上返回 ID 为 0 的电影的标题，但我得到的唯一错误是：

TypeError: 无法读取 null 的属性“0”

这里指出了问题->> {this.state.popularMovies[0].title}

Answer 1

我认为您没有执行retrievePopularMovies 方法，如果您执行该方法，您应该处理视图，因此它不会尝试读取初始状态的空值，它应该在您的render 中看起来像这样方法

const movies = this.state.popularMovies ? (
  <div>
    {this.state.popularMovies[0].title}
  </div>
) : (
  <div>Loading movies...</div>
);
return (
  <div>
    <h3>Popular Movies</h3>
    <div>
      {movies}
    </div>
  </div>
)

这将在调用 API 并执行 retrievePopularMovies 方法时显示文本“正在加载电影...”。完成后，它将自动更新视图。

Answer 2

正如@Mihályi Zoltán 所说，popularMovies 的初始值为 null，您目前正尝试访问该 null 的第一项，这是不可能的。

一个好的做法是将popularMovies 声明为一个空列表 ([])，然后对其进行迭代。在这种情况下，您将无法访问该空列表的第一项，因为没有任何项。

您正在使用基于类的组件，所以要充分利用它！使用componentDidMount生命周期方法并在其中进行api调用。然后像你一样设置状态，数据就可用了。

并且，正如@Pietro Nadalini 建议的那样，使用简单的三元有条件地渲染它。

Answer 3

看来你做的一切都正确除了调用 API。

您应该在组件挂载时添加对函数“retrievePopularMovies”的调用。

另外，您没有跟踪 API 调用的状态。因此，当组件App > 第一次呈现时，您将状态中的“popularMovies”为空。 而且您无法访问 null 的第 0 个索引。

您的代码可以像这样更新以正常工作 -

import React, { Component } from "react";
class App extends Component {
  state = {
    popularMovies: null
  };

  async componentDidMount() {
    await this.retrievePopularMovies();
  }

  async retrievePopularMovies() {
    const url =
      "https://api.themoviedb.org/3/movie/popular?api_key=651925d45022d1ae658063b443c99784";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ popularMovies: data.results });
  }
  render() {
    return (
      <div>
        <h3>Popular Movies</h3>
        <div>
          {!!this.state.popularMovies && this.state.popularMovies[0].title}
        </div>
      </div>
    );
  }
}

export default App;

注意更新：

1. 在“componentDidMount”生命周期中，我们调用 API 以获取响应。
2. 在渲染期间，我们检查“popularMovies”状态变量中是否有可用的响应数据，然后尝试访问第 0 个位置数据的标题。

Answer 4

正如@Mihályi Zoltán 提到的，我认为您需要设置状态的初始值popularMovies: [] 而不是保留它null。

Answer 5

popularMovies 的初始值为 null。您应该处理初始状态。 里面render：

if (this.state.popularMovies === null) {
  return 'Loading...'
}