Staat nicht

Question

immer aktualisiert

Ich bin derzeit Flickr api mit einer Abbildung Carousel zu machen und vor einem Problem, wo mein Zustand nicht updated oder rendered bekommt, wenn ich auf die Schaltfläche klicken.

Hier ist meine index.js

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

import Photo from './components/photo'; 

const urlArr = []; 
const apiKey = "API"; 
const userId = "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((photoData) => { 
     _.forEach(photoData.data.photos.photo, (photo) => { 
     urlArr.push(`https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg`); 
     }); 
     this.setState({ urlArr }); 
    }); 
    } 

    render() { 
    return (
     <div> 
     <Photo urls={this.state.urlArr}/> 
     </div> 
    ); 
    } 
}; 

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

und hier ist mein photo.js

import React, { Component } from 'react'; 
import NextButton from './nextButton'; 
import PrevButton from './prevButton'; 

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

    this.state = { idx: 0 }; 
    this.nextImg = this.nextImg.bind(this); 
    } 

    nextImg() { 
    this.setState({ idx: this.state.idx++ }); 
    } 

    render() { 
    if (this.props.urls.length === 0) { 
     return <div>Image Loading...</div> 
    } 

    console.log(this.state); 
    return(
     <div> 
     <PrevButton /> 
     <img src={this.props.urls[this.state.idx]}/> 
     <NextButton onClick={this.nextImg}/> 
     </div> 
    ); 
    } 
} 

export default Photo; 

und meine nextButton.js (das gleiche wie prevButton.js)

import React from 'react'; 

const NextButton =() =>{ 
    return (
    <div> 
     <button>next</button> 
    </div> 
); 
}; 

export default NextButton; 

Da ich ziemlich neu bin auf Reaktion, ich bin nicht ganz sicher, warum meine this.state.idx nicht aktualisiert wurden, wenn ich auf der nächsten Schaltfläche klicken (Mir scheint, dass es nicht einmal nextImg Funktion entweder feuert). Wenn jemand mir eine Hilfe oder einen Rat geben kann, würde das sehr geschätzt.

Vielen Dank im Voraus!

Answer 1

Aktualisieren Sie Ihren NextButton. Verwenden Sie das Ereignis in Ihrer Präsentationskomponente.

<NextButton next={this.nextImg}/> 

Und die NextButton-Komponente sollte so aussehen.

import React from 'react'; 
const NextButton = (props) =>{ 
return (<div> 
    <button onClick={props.next}>next</button> 
    </div> 
); 
}; 

Answer 2

Das Problem liegt bei diesem Stück Code:

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

this bezieht sich auf den axios.get Rückruf Umfang und nicht das Bauteil. Sie können eine andere Variable mit dem Namen self oder etwas, das für Sie sinnvoller ist, definieren und self.setState() aufrufen.

Sehen Sie diese Frage für ein ähnliches Problem: Javascript "this" scope