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

只需使用状态更改道具，当我阅读注释时，您就需要映射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}
      />
    ))}
}

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

2 个答案: