Reactjs Typescript错误“；无法读取属性'；数据'；“未定义”的定义；在电影api应用程序中： 无法读取未定义的属性“数据”

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

我还看到过其他一些例子，人们也有类似的问题，但我找不到解决问题的方法。我也不知道从哪里开始找。除此之外，我几乎没有编写web应用程序的经验，老实说，我没有编写任何应用程序的经验。任何帮助都将不胜感激！如果你有任何好的资源，你可以了解是什么导致或防止这种类型的问题，我很乐意参与其中

以下是我从chrome开发工具中获得的信息：

-未捕获类型错误：无法读取未定义的属性“数据”
-组件中发生了上述错误：
-在电影列表中（由应用程序创建）
-在div中（由应用程序创建）
-在div中（由应用程序创建）
-应用程序内“

App.tsx

从“axios”导入axios；
从“React”导入*作为React；
导入“/App.css”；
从“/Components/MoviesList”导入MoviesList；
从“/Components/SearchForm”导入SearchForm；
导出默认类App扩展React.Component{
构造器（道具：任何）{
超级（道具）；
this.state={
加载：对，
电影：[]
};
}
公共组件didmount（）{
这是performSearch（）；
}
公共性能搜索=（query=“Cats”）=>{
axios
.得到(`http://www.omdbapi.com/?apikey=（API键）&s=home`）
。然后（响应=>{
此.setState（{//(
));
}否则{
movies=404：未找到任何电影。；
}
return
{movies}
；
};
导出默认电影列表；

---

再次感谢您！我认为这就是造成您问题的原因：

movies: response.data.data

尝试将其更改为：

movies: response.data

在您询问了一些更一般的建议后，我将从学习如何使用DevTools调试器开始，因为它将使您在尝试诊断此类问题时变得更加独立。学习如何设置断点，以及如何逐步检查代码以检查发生的情况。这将为您节省很多时间的痛苦。此外，请不要担心id开始在代码中喷洒

console.log

语句，而您正在学习-请记住在学习之后删除它们

---

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

John，非常感谢您！成功了！我的404小消息显示得很好！：D现在我只需要弄清楚如何显示所需的数据！：）谢谢您！

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;

movies: response.data.data

movies: response.data