Question

React TypeError：无法读取未定义的属性“map”

2020-05-29

148

reactjs api

已更新

我正在学习 React，因此使用 omdbapi api 想要获取数据，但出现 TypeError：无法读取未定义的属性“map”

请帮忙解决此问题

class App extends React.Component {
  constructor(){
    super()
    this.state={
      data:[],
    }
  }
  componentDidMount(){
    fetch('http://www.omdbapi.com/?i=tt3896198&apikey=key123')
    .then((Response)=>Response.json())
    .then((findresponse)=>
    {
     this.setState({
       data:findresponse.movie
     })
      })
  }
  render() {
  return (
    <div>
      {this.state.data.map((dynamicData)=> 
      <div>
        <img src={dynamicData.Poster} alt=""/>
        <p>{dynamicData.title} </p>
        <p>{dynamicData.Released} </p>
      </div>
      )}
    </div>
  )
}
}

在得到以下答案后，我更新了源代码，现在 html 输出为空白，但 console.log 显示输出

我想循环播放 20 部电影

componentDidMount(){
    fetch('http://www.omdbapi.com/?apikey=mykey&s=batman')
    .then((Response)=>Response.json())
    .then((findresponse)=>
    {
      console.log(findresponse)
     this.setState({
      data:[findresponse]
     })
      })
  }
  render() {
  return (
    <div>
      {this.state.data && this.state.data.map((dynamicData , key)=> 
      <div key={key}>
        <img src={dynamicData.Poster} alt=""/>
        <p>{dynamicData.Title} </p>
        <p>{dynamicData.Released} </p>
      </div>
      )}
    </div>
  )
}
}

Answer 1

问题：

根据 api，它仅返回一个电影对象，并且它也没有 movie 键，因此您无法通过 json 对象 进行 map ，它应该是数组。

// response is taken from http://www.omdbapi.com/?i=tt3896198

{
    "Title": "Guardians of the Galaxy Vol. 2",
    "Year": "2017",
    "Rated": "PG-13",
    "Released": "05 May 2017",
    "Runtime": "136 min",
    "Genre": "Action, Adventure, Comedy, Sci-Fi",
    "Director": "James Gunn",
    "Writer": "James Gunn, Dan Abnett (based on the Marvel comics by), Andy Lanning (based on the Marvel comics by), Steve Englehart (Star-Lord created by), Steve Gan (Star-Lord created by), Jim Starlin (Gamora and Drax created by), Stan Lee (Groot created by), Larry Lieber (Groot created by), Jack Kirby (Groot created by), Bill Mantlo (Rocket Raccoon created by), Keith Giffen (Rocket Raccoon created by), Steve Gerber (Howard the Duck created by), Val Mayerik (Howard the Duck created by)",
    "Actors": "Chris Pratt, Zoe Saldana, Dave Bautista, Vin Diesel",
    "Plot": "The Guardians struggle to keep together as a team while dealing with their personal family issues, notably Star-Lord's encounter with his father the ambitious celestial being Ego.",
    "Language": "English",
    "Country": "USA",
    "Awards": "Nominated for 1 Oscar. Another 15 wins & 56 nominations.",
    "Poster": "https://m.media-amazon.com/images/M/MV5BNjM0NTc0NzItM2FlYS00YzEwLWE0YmUtNTA2ZWIzODc2OTgxXkEyXkFqcGdeQXVyNTgwNzIyNzg@._V1_SX300.jpg",
    "Ratings": [
        {
            "Source": "Internet Movie Database",
            "Value": "7.6/10"
        },
        {
            "Source": "Rotten Tomatoes",
            "Value": "85%"
        },
        {
            "Source": "Metacritic",
            "Value": "67/100"
        }
    ],
    "Metascore": "67",
    "imdbRating": "7.6",
    "imdbVotes": "537,920",
    "imdbID": "tt3896198",
    "Type": "movie",
    "DVD": "22 Aug 2017",
    "BoxOffice": "$389,804,217",
    "Production": "Walt Disney Pictures",
    "Website": "N/A",
    "Response": "True"
}

解决方案：

对于：来自 http://www.omdbapi.com/?i=tt3896198

// as there is no `movie` key change `findresponse.movie` to `findresponse`

// if you want to use it as array for only one object
this.setState({
    data:[findresponse]
    // OR
    data : [...this.state.data , findresponse] // <--- If you want pushing result with previous 
})

// suggested
this.setState({
    data : findresponse
})

对于： http://www.omdbapi.com/?apikey=YOUR_KEY&s=Batman ，你可以使用下面的一个

this.setState({
    data : findresponse.Search
})

Answer 2

首先尝试检查数据是否未定义：

{this.state.data && this.state.data.map((dynamicData)=> 
  <div>
    <img src={dynamicData.Poster} alt=""/>
    <p>{dynamicData.title} </p>
    <p>{dynamicData.Released} </p>
  </div>
  )}