Question

我试图掌握React /我正在使用Ajax接收数据，然后我想使用React显示这些数据。我收到了数据，但我无法弄清楚如何显示每个条目的标题。我在这里想念的是什么

＆＃13;

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

＆＃13;

Answer 1

我认为您需要将// Open the log file private void OpenFile() { // Show file open dialog if (openFile.ShowDialog() == DialogResult.OK) { // Create a dataset for binding the data to the grid. ds = new DataSet("EventLog Entries"); ds.Tables.Add("Events"); ds.Tables["Events"].Columns.Add("ComputerName"); ds.Tables["Events"].Columns.Add("EventId"); ds.Tables["Events"].Columns.Add("EventType"); ds.Tables["Events"].Columns.Add("SourceName"); ds.Tables["Events"].Columns.Add("Message"); // Start the processing as a background process EventLogClassContainer.EvlLocation = openFile.FileName; worker.RunWorkerAsync(openFile.FileName); } } // Bind the dataset to the grid. private void worker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e) { EventLogClassContainer.RELSystemTest(); bs = new BindingSource(ds, "Events"); Foo foo1 = new Foo("TEST PC"); ComputerName.Add(foo1); bs.DataSource = EventLogClassContainer._LogEntries; //Bind fooList to the dataGridView dataGridView1.DataSource = bs; this.Invoke(pbHandler, new object[] { 100, 100 }); }更改为this.setState({ data: data.data }

Answer 2

在您的ajax调用中，您的成功功能是使用您的请求收到的数据更新您的组件状态，并将其分配给您所在州的数据属性。

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

要访问您存储的数据，您的组件需要参考 {this.state.data}

为了让您的功能按预期工作，请尝试将您的回复分配给电影而不是数据

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

Answer 3

我需要更改成功功能：

import { Response } from '@angular/http';

对此：

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

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

使用React和Ajax接收数据

3 个答案: