电影 api-app 中的 Typescript 错误 "Cannot read property 'data' of undefined"：

Question

无法读取未定义的 属性 'data'

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

我见过一些其他人遇到类似问题但我找不到任何解决方案的例子。我也不确定从哪里开始寻找。除此之外，我几乎没有编写 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>
    );
  }
}

MoviesList.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 语句 - 只需记得在之后删除它们。

最终，学习编写自动化测试确实会帮助您对所编写的代码充满信心，但要一步一个脚印。