Using React and Ajax to receive data

Question

I trying to get a grasp of React/ I am using Ajax to receive data, and then I want to display this data using React. I am receiving the data, but I can't figure out how to display the titles of each entry. What am I missing here.

 <!-- 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

In your ajax call, your success function is updating your component's state with the data your request receives and assigning it to the data property of your state .

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

In order to access the data you store, your component will need to reference {this.state.data}

In order for your function work as intended, try assigning your response to movies instead of data

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

Answer 3

I needed to change the success function from this:

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

To this:

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

Data was returning an array, and I needed an object instead. If anyone knows of a clearer/more efficient way please let me know.