Fehler beim Binden von Array zu Status

Ich versuche, Fetch zu verwenden, um JSON-Daten von meinem Back-End zu erhalten und dann auf ein Array zu legen, und es auf dem Bildschirm jetzt für das Konsolenprotokoll anzuzeigen. Ich versuche, die Informationen zu speichern, die ich zurück in einem Array mit dem Namen data bekomme, das ich in getinistate initialisiert habe, und dann json-Daten hineinlege, während der Fetch-Aufruf ausgeführt wird. Vorerst Der Fehler, den ich bekomme, ist, dass console.log grundsätzlich leer ist.Fehler beim Binden von Array zu Status

Hier ist der Code.

<body> 
    <div id="reactBinding"></div> 

<script type="text/babel"> 
    var Heading = React.createClass({ 
    getInitialState: function() { 
     return { 
      data: [], 
      amount : 1000 
     }; 
    }, 
    handleChange: function(event){ 
     this.setState({amount : event.target.value}); 
    }, 
     loadCommentsFromServer: function() { 
     var value = { 
      method : 'GET' , 
      headers : { 
      'Accept': 'application/json', 
      'contentType' : 'application/x-www-form-urlencoded', 
      }, 
      body : ({ 
      amount : this.state.amount 
      }) 
     }; 
      fetch('http://localhost:3000/getIOT', value) 
      .then((response) => response.json()) 
      .then((responseData) =>{ 
      responseData : this.state.data 
      }) 
      .catch(function(err){ 
      console.log(err); 
     }); 
     }, 
     showTable : function(){ 
     console.log(data); 
     }, 
     render : function(){ 
     var amount = this.state.amount; 
     return(
      <div className="container"> 
      <div className="row"> 
       <div classname="col-xs-4 col-xs-offset-4"> 
       <div className="text-center"> 
        <h1>{this.props.name}</h1> 
        <h2> {amount} </h2> 
        <input type="text" value={amount} onChange={this.handleChange} /> 
        <button onClick={this.showTable}>Show Table</button> 
        <button onClick={this.loadCommentsFromServer}> Submit </button> 
       </div> 
       </div> 
      </div> 
      </div> 
     ); 
     } 
    }); 
ReactDOM.render(
    <div> 
     <Heading 
     name="React JS" 
     > 
     </Heading> 
     </div> 
    , document.getElementById('reactBinding')); 
</script> 
</body>

Also noch einmal, was ich will ist tun, um die Informationen bekommen von holen, legt es in den Variable data Array genannt und dann, wenn jemand showTable klickt, sollte es das Array console.log aus. Völlig neu, um zu reagieren, braucht ein bisschen Handhaltung, da dies das erste Mal ist, dass ich es schreibe. Wenn dieser Code ein bisschen zu unordentlich ist, wäre es großartig, wenn jemand mir helfen könnte, mir einen einfachen Abruf zu schreiben.

Auch wenn Sie Zeit haben, wäre es großartig, wenn jemand erklären könnte, wie ich das Array in einer Tabelle anzeigen kann. im showTable Teil.

Quelle

2017-02-26 Masnad Nihit

dann ((Antwort) => response.json()) Tippfehler? –

Off topic, aber wenn Sie Babel für die JSX verwenden, warum verwenden Sie es nicht auch, um richtige Klassen anstelle der Legacy "React.createClass" zu tun? – ndugger

@VladuIonut Ich habe den Tippfehler korrigiert, aber jetzt bekomme ich überhaupt keine Informationen ... –

Sie müssen die setState speichern die Daten in state Variable benutzen, wenn Sie die response, wie diese:

fetch('http://localhost:3000/getIOT', value) 
    .then((response) => response.json()) 
    .then((responseData) =>{ 
    //responseData : this.state.data 
    this.setState({data: responseData}); // use this line 
    })

die console.log in render Funktion setzen, werden die Daten drucken, wenn Sie die Antwort erhalten , wie folgt aus:

render : function(){ 
     var amount = this.state.amount; 
     console.log('data', this.state.data); 
     ....

aktualisieren:

Überprüfen Sie den Arbeits Code:

var Heading = React.createClass({ 
 
    getInitialState: function() { 
 
     return { 
 
      data: [], 
 
      amount : 1000 
 
     }; 
 
    }, 
 
    handleChange: function(event){ 
 
     this.setState({amount : event.target.value}); 
 
    }, 
 
     loadCommentsFromServer: function() { 
 
     var value = { 
 
      method : 'GET' , 
 
      headers : { 
 
      'Accept': 'application/json', 
 
      'contentType' : 'application/x-www-form-urlencoded', 
 
      }, 
 
      body : ({ 
 
      amount : this.state.amount 
 
      }) 
 
     }; 
 
      fetch('http://localhost:3000/getIOT', value) 
 
      .then((response) => response.json()) 
 
      .then((responseData) =>{ 
 
      this.setState({data: responseData}); 
 
      }) 
 
      .catch(function(err){ 
 
      console.log(err); 
 
     }); 
 
     }, 
 
     showTable : function(){ 
 
     console.log(this.state.data); 
 
     }, 
 
     render : function(){ 
 
     var amount = this.state.amount; 
 
     console.log('data', this.state.data); 
 
     return(
 
      <div className="container"> 
 
      <div className="row"> 
 
       <div classname="col-xs-4 col-xs-offset-4"> 
 
       <div className="text-center"> 
 
        <h1>{this.props.name}</h1> 
 
        <h2> {amount} </h2> 
 
        <input type="text" value={amount} onChange={this.handleChange} /> 
 
        <button onClick={this.showTable}>Show Table</button> 
 
        <button onClick={this.loadCommentsFromServer}> Submit </button> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     ); 
 
     } 
 
    }); 
 
ReactDOM.render(
 
    <div> 
 
     <Heading 
 
     name="React JS" 
 
     > 
 
     </Heading> 
 
     </div> 
 
    , document.getElementById('reactBinding'));

<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='reactBinding'></div>

Quelle

2017-02-26 17:09:03

Uncaught ReferenceError: Daten sind nicht definiert :( –

zuerst zeigt es Daten [] <- leer, dann erscheint der Fehler, wenn ich auf die Submit –

klicken Sie erhalten diesen Fehler, weil verwendet 'console.log (Daten)' in 'showTable' Methode, anstelle der Verwendung von' console.log (this.state.data) ', überprüfen Sie den Arbeitscode :) –

Fehler beim Binden von Array zu Status

Antwort

Verwandte Themen