Rendering-Zustand JSON in React

Question

Ich bin nicht in der Lage, die Anwendung zu erhalten, diese einfachen Statusdaten zu rendern. Es scheint mir, dass ich die Informationen im Render-Teil nicht bekommen kann, um den Daten-JSON zu verstehen.

this.state.data sollte das Objekt enthalten, da ich es console.log, wenn es fertig ist es holen.

ging ich davon aus, dass das Objekt, wie es

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
var $ = require('jquery'); 

class App extends Component { 

    loadData() { 
    console.log("loading data"); 
     fetch('https://api.nytimes.com/svc/movies/v2/reviews/search.json?api-key=f90d8b6f90d04bb5bbbeb2f241155ce7&query=star wars') 
      .then(response => response.json()) 
      .then(data => { 
       this.setState({data: data }); 
     }) 
      .catch(err => console.error(this.props.url, err.toString())) 
    } 

    constructor(props) { 
    super(props); 
    this.state = { data: [] }; 
    } 

    componentDidMount() { 
    console.log('GrandChild did mount.'); 

     this.loadData() 
    } 
    render() { 
    return (
     <div className="App"> 
     <header className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h1 className="App-title">Welcome to React</h1> 
     </header> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     <ul> 
       {this.state.data(function(name, index){ 
        return <li key={ index }>{name}</li>; 
        })} 
      </ul> 
     </div> 


    ); 
    } 
} 

export default App; 

Answer 1

Sie haben mehrere Fehler zu machen wäre in der Lage - siehe Korrekturen und Kommentare im Code:

class App extends React.Component { 
 

 
    loadData() { 
 
    console.log("loading data"); 
 
    fetch('https://api.nytimes.com/svc/movies/v2/reviews/search.json?api-key=f90d8b6f90d04bb5bbbeb2f241155ce7&query=star wars') 
 
     .then(response => response.json()) 
 
     .then(data => { 
 
     this.setState({ data: data }); 
 
     }) 
 
     .catch(err => console.error(this.props.url, err.toString())) 
 
    } 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = { data: null }; // initialize with null 
 
    } 
 

 
    componentDidMount() { 
 
    console.log('GrandChild did mount.'); 
 

 
    this.loadData() 
 
    } 
 

 
    render() { 
 
    const { data } = this.state; 
 
    return (
 
     <ul> 
 
     // if data not loaded null will render nothing 
 
     // if data is not null, we iterate data.results with map 
 
     {data && data.results.map(function (film, index) { 
 
      // film is an object, just one or more properties to render 
 
      return <li key={index}>{film.headline}</li>; 
 
     })} 
 
     </ul> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    app 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>