Reactjs React-setState获取API

我现在开始学习React并创建我的第二个项目。我正在尝试使用MovieDb API创建一个电影搜索应用程序。当我得到电影的初始列表时，一切都很好。但只要点击列表中的每一项，我就会显示每部电影的细节。我使用vanilla JS和传统的XHR调用创建了一些类似的应用程序。这次我使用的是fetch API，它看起来很简单，但是当我映射响应数据以获取每部电影的id，以便分别检索每部电影的详细信息时，我得到了所有项目的详细信息的完整列表，这不是期望的效果。我将对象列表放入一个数组中，因为在map中设置state之后，我只获得最后一个元素的详细信息。我知道我可能在API调用中做错了什么，但这也可能是我的全部代码。我将感谢任何帮助

我的代码

App.js

import React, { Component } from 'react';
import SearchInput from './Components/SearchInput'
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

      this.state = 
        {
          value: '',
          showComponent: false, 
          results: [],
          images: {},
        };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleOnChange = this.handleOnChange.bind(this);
    this.getImages = this.getImages.bind(this);
    this.getData = this.getData.bind(this);
}

ComponentWillMount() {
  this.getImages();
  this.getData();
}

getImages(d) {
  let request = 'https://api.themoviedb.org/3/configuration?api_key=70790634913a5fad270423eb23e97259'
  fetch(request)
    .then((response) => {
        return response.json();
    }).then((data) => {
      this.setState({
        images: data.images
      });
    });
}

  getData() {
    let request = new Request('https://api.themoviedb.org/3/search/movie?api_key=70790634913a5fad270423eb23e97259&query='+this.state.value+'');

    fetch(request)
      .then((response) => {
        return response.json();
      }).then((data) => {               
        this.setState({
          results: data.results
        });             
      });
  }

  handleOnChange(e) {
    this.setState({value: e.target.value})
  }

  handleSubmit(e) {
    e.preventDefault();
    this.getImages();
    this.setState({showComponent: true});
    this.getData();
  }

  render() {
    return (
      <SearchInput handleSubmit={this.handleSubmit} handleOnChange={this.handleOnChange} results={this.state.results} images={this.state.images} value={this.state.value} showComponent={this.state.showComponent}/>
    );
  }
}

export default App;


SearchInput.js

import React, {Component} from 'react';
import MoviesList from './MoviesList';

class SearchInput extends Component {
  render() {
    return(
      <div className='container'>
        <form id='search-form' onSubmit={this.props.handleSubmit}>
          <input value={this.props.value} onChange={this.props.handleOnChange} type='text' placeholder='Search movies, tv shows...' name='search-field' id='search-field' />
          <button type='submit'>Search</button>
        </form>
        <ul>
          {this.props.showComponent ?
              <MoviesList value={this.props.value} results={this.props.results} images={this.props.images}/> : null
          }
        </ul>
      </div>
    )
  }
}

export default SearchInput;

import React，{Component}来自'React'；
从“./Components/SearchInput”导入SearchInput
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state=
{
值：“”，
showComponent:false，
结果：[]，
图像：{}，
};
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleOnChange=this.handleOnChange.bind（this）；
this.getImages=this.getImages.bind（this）；
this.getData=this.getData.bind（this）；
}
组件willmount（）{
这是getImages（）；
这是getData（）；
}
getImages（d）{
让我请求你https://api.themoviedb.org/3/configuration?api_key=70790634913a5fad270423eb23e97259'
提取（请求）
。然后（（响应）=>{
返回response.json（）；
})。然后（（数据）=>{
这是我的国家({
图像：data.images
});
});
}
getData（）{
let请求=新请求（'https://api.themoviedb.org/3/search/movie?api_key=70790634913a5fad270423eb23e97259&query=“+this.state.value+”）；
提取（请求）
。然后（（响应）=>{
返回response.json（）；
}).然后（（数据）=>{
这是我的国家({
结果：数据。结果
});             
});
}
更改（e）{
this.setState（{value:e.target.value}）
}
handleSubmit（e）{
e、 预防默认值（）；
这是getImages（）；
this.setState（{showComponent:true}）；
这是getData（）；
}
render（）{
返回(
);
}
}
导出默认应用程序；
SearchInput.js
从“React”导入React，{Component}；
从“/MoviesList”导入MoviesList；
类SearchInput扩展组件{
render（）{
返回(
搜寻

{this.props.showComponent？
：null
}

)
}
}
导出默认搜索输入；

这是我试图获取详细数据的组件

MovieList.js

import React, { Component } from 'react';
import MovieDetails from './MovieDetails';

let details = [];

class MoviesList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showComponent: false,
      details: []
    }

    this.showDetails = this.showDetails.bind(this);
    this.getDetails = this.getDetails.bind(this);

  }


  componentDidMount() {
    this.getDetails();
  }

  getDetails() {
    let request = new Request('https://api.themoviedb.org/3/search/movie?api_key=70790634913a5fad270423eb23e97259&query='+this.props.value+'');

    fetch(request)
      .then((response) => {
        return response.json();
      }).then((data) => {    
      data.results.forEach((result, i) => {
        let url = 'https://api.themoviedb.org/3/movie/'+ result.id +'?api_key=70790634913a5fad270423eb23e97259&append_to_response=videos,images';
        return fetch(url)
        .then((response) => {
          return response.json();
        }).then((data) => {
          details.push(data)   
          this.setState({details: details});   
        });
      });   
      console.log(details);
  });
}



  showDetails(id) {
    this.setState({showComponent: true}, () => {
      console.log(this.state.details)
    });
    console.log(this.props.results)
  }

  render() {
    let results;
    let images = this.props.images;

    results = this.props.results.map((result, index) => {
      return(
        <li ref={result.id} id={result.id} key={result.id} onClick={this.showDetails}>
          {result.title}{result.id}
          <img  src={images.base_url +`${images.poster_sizes?images.poster_sizes[0]: 'err'}` + result.backdrop_path} alt=''/>
        </li>
      )
    });

    return (
      <div>
        {results}
        <div>
          {this.state.showComponent ? <MovieDetails details={this.state.details} results={this.props.results}/> : null}
        </div>
      </div>
    )
  }
}

export default MoviesList;

import React，{Component}来自'React'；
从“/MovieDetails”导入电影详细信息；
让细节=[]；
类MoviesList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showComponent:false，
详情：[]
}
this.showDetails=this.showDetails.bind（this）；
this.getDetails=this.getDetails.bind（this）；
}
componentDidMount（）{
这是getDetails（）；
}
getDetails（）{
let请求=新请求（'https://api.themoviedb.org/3/search/movie?api_key=70790634913a5fad270423eb23e97259&query=“+this.props.value+”）；
提取（请求）
。然后（（响应）=>{
返回response.json（）；
}).然后（（数据）=>{
data.results.forEach（（result，i）=>{
让url为空https://api.themoviedb.org/3/movie/“+result.id+”？api_key=70790634913a5fad270423eb23e97259&append_to_response=videos，images'；
返回获取（url）
。然后（（响应）=>{
返回response.json（）；
})。然后（（数据）=>{
详情。推送（数据）
this.setState（{details:details}）；
});
});   
控制台日志（详细信息）；
});
}
展示详情（id）{
this.setState（{showComponent:true}，（）=>{
console.log（this.state.details）
});
console.log（this.props.results）
}
render（）{
让结果；
让images=this.props.images；
results=this.props.results.map（（结果，索引）=>{
返回(

{result.title}{result.id}

)
});
返回(
{results}
{this.state.showComponent？：null}
)
}
}
导出默认电影列表；

MovieDetails.js

import React, { Component } from 'react';

class MovieDetails extends Component {


  render() {
    let details;
    details = this.props.details.map((detail,index) => {
      if (this.props.results[index].id === detail.id) {
      return(
        <div key={detail.id}>
          {this.props.results[index].id}  {detail.id}
        </div>
      )} else {
        console.log('err')
      }
    });

    return(
      <ul>
        {details}
      </ul>
    )

  }
}

export default MovieDetails;

import React，{Component}来自'React'；
类MovieDetails扩展组件{
render（）{
让我们了解细节；
details=this.props.details.map（（细节，索引）=>{
if（this.props.results[index].id==detail.id）{
返回(
{this.props.results[index].id}{detail.id}
)}否则{
console.log（'err'）
}
});
返回(

{详细信息}

)
}
}
导出默认电影详细信息；

这里发生了很多事情

//在这里，您将附加一个onclick侦听器，如果您愿意，可以通过id或完整结果发送“获取有关此特定电影功能的详细信息”

//然后获取详细信息，需要获取一个参数（id），您可以使用该参数获取一部电影

getDetails(id){
fetch(id)
displayresults, profit
}

results = this.props.results.map((result, index) => {
          return(
            <li onClick={() => this.getDetails(result.id) ref={result.id} id={result.id} key={result.id} onClick={this.showDetails}>
              {result.title}{result.id}
              <img  src={images.base_url +`${images.poster_sizes?images.poster_sizes[0]: 'err'}` + result.backdrop_path} alt=''/>
            </li>
          )
        });

getDetails（id）{
提取（id）
显示结果、利润
}
results=this.props.results.map（（结果，索引）=>{
返回(
this.getDetails（result.id）ref={result.id}id={result.id}key={result.id}onClick={this.showDetails}>
{result.title}{result.id}

)
});

谢谢你给我所有的答案，但实际上我已经想在朋友的帮助下解决这个问题。在我的电影里

import React, { Component } from 'react';
import Movie from './Movie';

class MoviesList extends Component {
  render() {
    let results;
    if(this.props.results) {
      results = this.props.results.map((result, index) => {
        return(
          <Movie key={result.id} result={result} images={this.props.images}/>
        )
      });
    }

    return (
      <div>
        {results}
      </div>
    )
  }
}

export default MoviesList;

import React, { Component } from 'react';
import MovieDetails from './MovieDetails';

class Movie extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showComponent: false,
      details: []
    }

    this.showDetails = this.showDetails.bind(this);
    this.getDetails = this.getDetails.bind(this);
  }

  componentDidMount() {
    this.getDetails();
  }

  getDetails() {
    let request = new Request('https://api.themoviedb.org/3/search/movie?api_key=70790634913a5fad270423eb23e97259&query='+this.props.value+'');

    fetch(request)
      .then((response) => {
        return response.json();
      }).then((data) => {    
        let url = 'https://api.themoviedb.org/3/movie/'+ this.props.result.id +'?api_key=70790634913a5fad270423eb23e97259&append_to_response=videos,images';
        return fetch(url)
      }).then((response) => {
          return response.json();
      }).then((data) => { 
          this.setState({details: data});   
      });
}

  showDetails(id) {
    this.setState({showComponent: true}, () => {
      console.log(this.state.details)
    });
  }

  render() {
    return(
      <li ref={this.props.result.id} id={this.props.result.id} key={this.props.result.id} onClick={this.showDetails}>
        {this.props.result.title}
        <img  src={this.props.images.base_url +`${this.props.images.poster_sizes?this.props.images.poster_sizes[0]: 'err'}` + this.props.result.backdrop_path} alt=''/>
        {this.state.showComponent ? <MovieDetails details={this.state.details}/> : null}
      </li>
    )

  }
}


export default Movie;