undefiniert Staat, wenn Daten für Halterung ziehen

Question

Ich ziehe Daten von meinem meiner Datenbank, die vor der Montage des Bauteils zur Verfügung, um sein muss für die Seite mit der componentDidMount() Lifecycle-Methode gefüllt werden. Ich habe überprüft, dass, wenn ich die setState und console.log meine Daten entfernen, es aus der DB wie erwartet abrufen, aber wenn ich versuche, die Daten zu meiner Statusvariablen zuzuweisen, gibt es einen Fehler unter der Unable to get property 'setState' of undefined or null reference innerhalb meiner componentWillMount() Lebenszyklus-Methode . Ich habe meinen ReactJS-Code unten aufgelistet.

import React, { Component, PropTypes } from 'react'; 
import Picture from '../../components/picture.jsx'; 
import { browserHistory } from 'react-router'; 
export default class Products extends Component { 

    constructor(props) { 
     super(props); 
     this.state = {clothingData: ''}; 
    } 

    componentWillMount(){ 
      fetch('/t') 
      .then(function(result){ 
       return result.json(); 
      }) 
      .then(function(re){ 
       this.setState({ clothingData: re }); 
       console.log(this.state.clothingData); 
      }) 
      .catch(function(error){ 
       console.log(error); 
      }); 
    } 

    componentDidMount(){ 

     //empty for now 
    } 

    render(){ 
     var MyArray = ['justin','tiffany','joe','john','karissa','pam','joseph','sean','kim']; 
     var imageSrc = ['http://placehold.it/249x373','http://placehold.it/249x373','http://placehold.it/249x373','http://placehold.it/249x373','http://placehold.it/249x373', 
         'http://placehold.it/249x373', 'http://placehold.it/249x373', 'http://placehold.it/249x373']; 

    return (
     <div> 
     <Picture src = {imageSrc} onClick = {() => {browserHistory.push('/Product'); }} name = {MyArray} amount = {8} /> 
     </div> 
); 
} 
} 

Answer 1

Das Problem ist, dass this wird aus der Komponenten-Instanz an die Funktionsinstanz/globales Objekt zugewiesen wird.

componentWillMount() { 
    fetch('/t') 
    .then((result) => { 
     return result.json(); 
    }) 
    .then((re) => { 
     this.setState({ clothingData: re }); 
     console.log(this.state.clothingData); 
    }) 
    .catch(function(error){ 
     console.log(error); 
    }); 
} 

wird gut funktionieren, da der Pfeil-Funktion wird sichergestellt, dass die this auf die Komponenteninstanz wird so gebunden ist this.setState tatsächlich definiert werden. Während das, was Sie haben die this wird auf das globale Objekt festgelegt, die nicht eine Eigenschaft von setState