我正在尝试通过从 TMDB API 加载的数组来 map

Question

I uploaded my Data using FETCH from the TMDB API, When i try to map through it, it gives me an error undefined is not an object (evaluating 'NowMovies.map')

this is my code:

    constructor(props){
    super(props);
    this.state={
      NowMovies:[],
      isLoaded:false
    }
  }

    componentDidMount(){
     fetch('API')
    .then(data => data.json())
    .then(({MoviesLists}) => {this.setState({
      isLoaded:true,
      NowMovies:MoviesLists
    })
    })
    }
  render(){
    var {isLoaded,NowMovies} = this.state
    if (!isLoaded){
      return <div> .... Loading</div>
    }
    else{
    return(
      <div>

      <ul>  
      {NowMovies.map(Movie=>(<li key={NowMovies.id}> name:{NowMovies.original_title}</li>
      ))}
      </ul>
      </div>

this is what the API loades

can anyone help me with loading this data to my array and map through it??

Answer 1

You're trying to access NowMovies within the map function, you should use the Movie object you've passed instead.

 {NowMovies.map(Movie =>( <li key={Movie.id}> name:{Movie.original_title} </li> }

Answer 2

You can not assign directly the value, for that you can use.concat() or.push(). And correct with.map().

constructor(props){
    super(props);
    this.state={
      NowMovies:[],
      isLoaded:false
    }
  }

    componentDidMount(){
     fetch(API)
    .then((data) => data.json())
    .then(({MoviesLists}) => {
  let movieList = this.state.NowMovies.concat(MoviesLists);
this.setState({
      isLoaded:true,
      NowMovies : movieList
    })
    })
    }
  render(){
    var {isLoaded,NowMovies} = this.state
    if (!isLoaded){
      return <div> .... Loading</div>
    }
    else{
    return(
      <div>
      <ul>  
      {NowMovies.map(Movie=>(<li key={Movie.id}> name:{Movie.original_title}</li>
      ))}
      </ul>
      </div>