国家是不会得到更新
问题描述:
这里是我的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'));
,这里是我的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;
和我nextButton.js(同prevButton.js )
import React from 'react';
const NextButton =() =>{
return (
<div>
<button>next</button>
</div>
);
};
export default NextButton;
因为我是相当新的阵营,我不明白为什么当我点击下一个按钮我this.state.idx
没有得到更新(在我看来,它甚至不是射击nextImg函数或者)。如果任何人都可以给我一个帮助或建议,那真的很感激。
在此先感谢!
答
更新您的NextButton。在演示组件中使用该事件。
<NextButton next={this.nextImg}/>
NextButton组件应该看起来像这样。
import React from 'react';
const NextButton = (props) =>{
return (<div>
<button onClick={props.next}>next</button>
</div>
);
};
答
问题在于这一段代码:
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
指axios.get
回调范围,而不是组件。您可以定义另一个名为self
的变量,或者对您更有意义的变量,并致电self.setState()
。
了类似的问题,请参见该问题:Javascript "this" scope
当你点击该按钮,您应该检查是否'nextImg'炒鱿鱼 – Khang