Kann den Status der React-Komponente nicht festlegen

Question

Ich rufe eine API mithilfe der Fetch-API in meiner reagierenden Komponente auf, um den Status festzulegen. Das ist mein Code.

class MyComponent extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { fullName: null, uid: null }; 

    } 
    componentWillMount(){ 

    fetch(url) 
     .then(
     function(response) { 
      if (response.status !== 200) { 
      console.log('Looks like there was a problem. Status Code: ' + 
       response.status); 
      return; 
      } 

      response.json().then(function(data) { 
      this.setState(fullName = data.first.givenName + " " + data.lastName, 
       uid =data.uid); 
      }); 
     } 
    ) 
     .catch(function(err) { 
     console.log('Fetch Error :-S', err); 
     }); 
    } 


    render() { 
    return (
     <div className="header"> 
     <nav className="navbar navbar-default navbar-fixed-top"> 
      <div className="navbar-header"> 
      <a className="navbar-brand" href="#"> {this.state.fullName}</a> 
      </div> 


      <div className="brand-right"> 
      <ul className="nav navbar-nav navbar-right"> 
       <li><a href="#">UID: {this.state.yguid} </a></li> 
      </ul> 
      </div> 
     </nav> 
     </div> 
    ); 
    } 
} 

export default MyComponent; 

bekomme ich folgende Fehlermeldung:

Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined 

ich nicht zu verstehen scheinen kann, warum setState nicht funktioniert. Wenn ich console.log (Daten) innerhalb des then-Blocks gebe, gibt es die korrekten Daten aus, schlägt dann aber in der nächsten Zeile fehl. Wie kann ich das richtig machen?

Answer 1

Die Funktion, die Sie in then übergeben, ist nicht an den aktuellen Kontext gebunden, was dazu führt, dass this in Ihrer Callback-Funktion undefiniert ist, anstatt auf Ihre Komponenteninstanz zu verweisen. Verwenden Sie einfach bind(this) den Rückruf mit Komponente wie folgt zu binden:

.then(function() { 
    // function body 
}.bind(this)); 

oder Sie können Pfeil Funktion verwenden, die den Kontext implizit bindet:

.then(() => { 
    // function body 
}); 

Answer 2

Dies geschieht, weil this, die Sie unter fetch verwenden nicht gleich die this unter der Klasse MyComponent ist.

Versuchen arrow functions

fetch(url) 
    .then((response) => { 
    if (response.status !== 200) { 
     console.log('Looks like there was a problem. Status Code: ' + 
     response.status); 
     return; 
    } 

    response.json().then((data) => { 
     this.setState({ 
     fullName: data.first.givenName + " " + data.lastName, 
     uid: data.uid, 
     }); 
    }); 
    }) 
    .catch((err) => { 
    console.log('Fetch Error :-S', err); 
    }); 

hoffe, das hilft zu verwenden!

Answer 3

Der richtige Weg zu gesetzt ein Zustand Passieren der Staat als Objekt. ZB:

this.setState({ 
    fullName: data.first.givenName + " " + data.lastName, 
    uid: data.uid 
});