使用React和Ajax接收数据

Question

我试图了解React /我正在使用Ajax接收数据，然后想使用React显示此数据。 我正在接收数据，但是我不知道如何显示每个条目的标题。 我在这里想念什么。

 <!-- App.js --> import React, { Component } from 'react'; import $ from 'jquery'; import Movies from './Components/Movies'; import './App.css'; class App extends Component { constructor(){ super(); this.state = { movies: [] } } getMovies() { $.ajax({ url: 'https://api.themoviedb.org/3/movie/76341?api_key=cfe422613b250f702980a3bbf9e90716', dataType: 'json', cache: false, success: function(data) { this.setState({ data: data.data }, function() { console.log(data); }) }.bind(this), error: function(xhr, status, err) { console.log(err); } }) } componentWillMount(){ this.getMovies(); } componentDidMount() { this.getMovies(); } render() { return ( <div className="App"> <hr/> <Movies movies={this.state.movies} /> </div> ); } } export default App; <!-- Movies.js --> import React, { Component } from 'react'; import Movie from './Movie'; class Movies extends Component { render() { let movies; if( this.props.movies ) { movies = this.props.movies.map( movie => { // console.log(todo); return ( <Movie key={movie.title} movie={ movie } /> ); }); } return ( <div className="Movie"> <h3></h3> {movies} </div> ); } } Movies.propTypes = { todos: React.PropTypes.array, } export default Movies; <!-- Movie.js --> import React, { Component } from 'react'; class Movie extends Component { render() { return ( <li className="Movie"> <strong>{this.props.data.title}:</strong> </li> ); } } Movie.propTypes = { todos: React.PropTypes.object, } export default Movie; 

Answer 1

我认为您需要将this.setState({ data: data.data }更改为this.setState({ movies: data.data }

Answer 2

在ajax调用中，成功函数将使用请求接收到的数据更新组件的状态， 并将其分配给state的data属性 。

this.state = {
    data: { //whatever your ajax response was }
}

为了访问您存储的数据，您的组件将需要引用{this.state.data}

为了使功能正常工作，请尝试将响应分配给电影而不是数据

this.setState({movies: data.data})

Answer 3

我需要从此更改成功功能：

success: function(data) {
           this.setState({ data: data.data }, function() {
                console.log(data);
            })
}.bind(this),

对此：

success: function(data) {
           this.setState({ movies: [data] }, function() {
                console.log(data);
            })
}.bind(this),

数据返回一个数组，而我需要一个对象。 如果有人知道更清晰/更有效的方法，请告诉我。