我正在尝试映射从 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 =>(&nbsp; <li key={Movie.id}>&nbsp;&nbsp; &nbsp; name:{Movie.original_title}&nbsp; </li>}

Answer 2

您不能直接分配值，为此您可以使用 .concat() 或 .push()。并使用 .map() 进行更正。constructor(props){&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state={&nbsp; &nbsp; &nbsp; NowMovies:[],&nbsp; &nbsp; &nbsp; isLoaded:false&nbsp; &nbsp; }&nbsp; }&nbsp; &nbsp; componentDidMount(){&nbsp; &nbsp; &nbsp;fetch(API)&nbsp; &nbsp; .then((data) => data.json())&nbsp; &nbsp; .then(({MoviesLists}) => {&nbsp; let movieList = this.state.NowMovies.concat(MoviesLists);this.setState({&nbsp; &nbsp; &nbsp; isLoaded:true,&nbsp; &nbsp; &nbsp; NowMovies : movieList&nbsp; &nbsp; })&nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; render(){&nbsp; &nbsp; var {isLoaded,NowMovies} = this.state&nbsp; &nbsp; if (!isLoaded){&nbsp; &nbsp; &nbsp; return <div> .... Loading</div>&nbsp; &nbsp; }&nbsp; &nbsp; else{&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <ul>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; {NowMovies.map(Movie=>(<li key={Movie.id}> name:{Movie.original_title}</li>&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>