从 Api 获取数据时，TypeError 无法读取未定义的属性“地图”

Question

我正在尝试使用 React 从 API 获取一些数据。以下是我收到错误的组件之一。

import React, { Component } from "react";
import Filmcard from "./Filmcard";

const url = "http://www.omdbapi.com/?s=star&apikey=4ababda2";

class Filmcardlist extends Component {
  constructor() {
    super();
    this.state = {
      films: []
    };
  }
  componentDidMount() {
    fetch(url)
      .then(resonse => resonse.json())
      .then(data => {
        this.setState({ films: data });
      })
      .catch(error => console.log("I have errored" + error));
  }

  render() {
    return (
      <div>
        {this.props.films.map(film => (
          <Filmcard
            Title={film.Title}
            Year={film.Year}
            imdbID={film.imdbID}
            Type={film.Type}
          />
        ))}
      </div>
    );
  }
}

export default Filmcardlist;

我对 React 还很陌生，我不知道为什么会出现这个错误。

Answer 1

改变：

this.setState({ films: data });

到：

this.setState({ films: data.Search });

和this.props.films 到this.state.films 在渲染函数中。

Answer 2

只需使用 state 更改道具，当我阅读 cmets 时，您需要映射 data.search。 试试这个代码，希望能帮到你！

{
if(this.state && this.state.films && this.state.films.search){
this.state.films.search.map(film => (
      <Filmcard
        Title={film.Title}
        Year={film.Year}
        imdbID={film.imdbID}
        Type={film.Type}
      />
    ))}
}