我正在尝试映射从 TMDB API 加载的数组

Question

我使用 FETCH 从 TMDB API 上传了我的数据，当我尝试通过它进行映射时，它给了我一个错误 undefined is not an object（评估“NowMovies.map”）这是我的代码：    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>谁能帮我将这些数据加载到我的数组中并通过它映射？

Answer 1

您试图NowMovies在 map 函数中访问，您应该使用Movie您传递的对象。

{NowMovies.map(Movie =>(

  <li key={Movie.id}> 

    name:{Movie.original_title}

  </li>

}

Answer 2

您不能直接分配值，为此您可以使用 .concat() 或 .push()。并使用 .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>