我尝试获取数据com电影db api，但出现此错误："TypeError: Cannot read property '0' of null "

我想从电影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}

我认为您不是执行retrievePopularMovies方法，如果您执行方法应该处理视图，以便它不尝试读取初始状态的null值，应该看起来像这内的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方法。完成后，它将自动更新视图。

正如 @mihályiZoltán所说，popularMovies的不合理值是无效的，您当前正在尝试访问该null的第一项，这是不可能的。

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

您正在使用基于类的组件，因此请最大程度地利用它！使用componentDidMount生命周期方法，并在其中进行API调用。然后设置状态，并将数据可用。

，正如@pietro Nadalini所建议的那样，使其有条件地呈现使用简单的三元。

似乎您做了正确的一切，除了调用api 。

组件安装时，您应该将调用添加到功能" retrievePopularMovies"。

另外，您也不会跟踪API呼叫的状态。因此，当组件App>首次渲染时，您将以null为单位。而且您无法访问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;

注意更新：

在" componentdidmount" lifecylce中，我们正在调用API以获取响应。
在渲染过程中，我们检查是否在" pusonmovies'状态变量中有可用的响应数据，然后尝试访问0th位置数据的标题。

as @mihályiZoltán提到，我认为您需要设置状态popularMovies: []的初始值，而不是保持 null。

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

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

相关内容

最新更新

热门标签：