reactjs - 电影 api-app : 中未定义的 typescript 错误 "Cannot read property ' 数据'

Question

无法读取未定义的属性“数据”

我的 react typescript 电影信息应用程序有问题。 我想做的是显示从 API 返回的数据，但我陷入了“无法读取未定义的属性'数据'”，所有组件都已构建，但这是一个完整的路障。

我见过其他一些例子，人们有类似的问题，但我找不到任何解决方案来解决我的问题。我也不知道从哪里开始寻找。除此之外，我几乎没有编写 Web 应用程序的经验，老实说，我根本没有编写任何应用程序的经验。任何帮助都感激不尽!如果您有任何好的资源可以了解导致或防止此类问题的原因，我很乐意参与其中!

这是我从 chrome devtools 获得的信息:

- Uncaught TypeError: Cannot read property 'data' of undefined
- The above error occurred in the <MoviesList> component:
- in MoviesList (created by App)
- in div (created by App)
- in div (created by App)
- in App"

App.tsx

import axios from "axios";
import * as React from "react";
import "./App.css";
import MoviesList from "./Components/MoviesList";
import SearchForm from "./Components/SearchForm";

export default class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = { 
      loading: true,
      movies: []
    };
  }

  public componentDidMount() {
    this.performSearch();
  }

  public performSearch = (query = "Cats") => {
    axios
      .get(`http://www.omdbapi.com/?apikey=(API-key)&s=home`)
      .then(response => {
        this.setState({    //<---- Here's where my code breaks in "App"
          loading: false,
          movies: response.data.data
        });
      })
      .catch(error => {
        // tslint:disable-next-line:no-console
        console.log("Error fetching and parsing data", error);
      });
  };

  public render() {
    return (
      <div>
        <div className="main-header">
          <div className="inner">
            <h1 className="main-title">Playpilot Assignment</h1>
            <SearchForm onSearch={this.performSearch} />
          </div>
        </div>
        <div className="main-content">
          {this.state.loading ? (
            <p>Loading...</p>
          ) : (
            <MoviesList data={this.state.movies} />
          )}
        </div>
      </div>
    );
  }
}

电影列表.tsx

import * as React from "react";
import Movie from "./Movie";

const MoviesList = (props: any) => {
  const results = props.data;
  let movies: any;
  if (results.data) { //<-- Here's where my code breaks in "MoviesList"
    movies = results.map((movie: any) => (
      <Movie url={props.url} key={movie.id} />
   ));
  } else {
    movies = <h1>404: No movies found.</h1>;
  }

  return <ul className="movie-list">{movies}</ul>;
};

export default MoviesList;

再次感谢您!

Answer 1

我认为这是什么导致了你的问题:

movies: response.data.data

尝试将其更改为:

movies: response.data

由于您要求一些更一般的建议，我会首先学习如何使用 DevTools 调试器，因为它将使您在尝试诊断此类问题时变得更加独立。了解如何设置断点，以及如何单步执行代码以检查发生的情况。这将为您节省许多小时的悲伤。另外，在学习时不要害怕开始在代码中散布 console.log 语句 - 只需记住之后将其删除即可。

最终，学习编写自动化测试将真正帮助您对正在编写的代码充满信心，但要一步一步地进行。