Eigenschaft 'setState' von undefined kann nicht gelesen werden

Question

Ich versuche, Flickr Api zu verwenden, um öffentliche Fotos zu holen und ein Bilderkarussell mit ihnen zu erstellen, aber es scheint, dass es nicht Fotos am Anfang erhalten möchte. Da ich neu in React bin, ist es wirklich schwer herauszufinden, was ich hier falsch mache, also wird jede Art von Hilfe geschätzt. Danke.

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import axios from 'axios'; 
import _ from 'lodash'; 

import Button from './components/button'; 

const urlArr = []; 
const apiKey = "YOUR_API"; 
const userId = "YOUR_ID"; 
const url = `https://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=${apiKey}&user_id=${userId}&format=json&nojsoncallback=1`; 


class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { urlArr: [] }; 

    axios.get(url) 
    .then(function(photoData) { 
     _.forEach(photoData.data.photos.photo, (photo) => { 
     // this.setState({ urlArr: `https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg` }); 
     urlArr.push(`https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg`); 
     }); 
     this.setState({ urlArr }); 
    }); 
    } 

    render() { 
    return (
     <div> 
     <Button /> 
     </div> 
    ); 
    } 
}; 

ReactDOM.render(<App/>, document.querySelector('.container')); 

-Code oben gibt ‚Typeerror: kann Eigenschaft lesen‚setState‘undefinierter‘ und ich bin nicht ganz sicher, was das bedeutet ..

Answer 1

Sie den Aufruf der setState() in a Rückruffunktion eines Promise.

Der Fehler ist, weil die diese nicht die React-Komponente ist.

Sie sollten eine Pfeilfunktion verwenden oder die React Component-Instanz an Ihre Callback-Funktion binden.

Zum Beispiel:

axios.get(url) 
.then((photoData) => { 
    _.forEach(photoData.data.photos.photo, (photo) => { 
    // this.setState({ urlArr: `https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg` }); 
    urlArr.push(`https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg`); 
    }); 
    this.setState({ urlArr }); 
}); 

Oder:

axios.get(url) 
.then(function(photoData) { 
    _.forEach(photoData.data.photos.photo, (photo) => { 
    // this.setState({ urlArr: `https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg` }); 
    urlArr.push(`https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg`); 
    }); 
    this.setState({ urlArr }); 
}.bind(this));