在反应中用变量更新状态
在反应中用变量更新状态
提问于 2019-01-29 10:26:11
我正试图破解这个特殊的螺母，而我的状态并没有更新。我有一个通过Axios调用NASA的函数，它运行得很好。目前，默认情况下，datePicked状态为空，这意味着GET请求默认为当前日期。我要添加一些功能来生成一个随机日期(函数onRandomDateClick)，这一切都很好。
然后，我想用生成的日期更新datePicked的状态，然后运行包含axios请求的onImageGet函数。
初始状态
class Photo extends Component {
state = {
apiUrl: 'XXXXXXXX',
apiKey: 'XXXXXXXX',
image: null,
imgChecked: false,
datePicked: ""
};生成随机日期、日志变量和状态。状态当前显示为空白。this.setState不起作用了。
onRandomDateClick = (e) => {
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
let randomDateResult = randomDate(new Date(2012, 0, 1), new Date())
let datePicked = randomDateResult.toISOString().slice(0,10);
this.setState({datePicked})
console.log("variable is " + datePicked);
console.log("state is " + this.state.datePicked);
this.onImageGet();
}Axios调用这里的状态
onImageGet = e => {
axios.get(`${this.state.apiUrl}?api_key=${this.state.apiKey}&date=${this.state.datePicked}`)
//response always starts res.data
.then(res => {
const image = res.data;
this.setState({ image })
})
this.setState({imgChecked: true})
}
render() {
...blah blah...
return (
<div className="photo">
... blah blah blah ...
</div>
);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-01-29 10:37:29
Js正在为http调用提供异步服务。对于React，setState是async.you应该做这样的事情。
onRandomDateClick = (e) => {
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
let randomDateResult = randomDate(new Date(2012, 0, 1), new Date())
let datePicked = randomDateResult.toISOString().slice(0,10);
this.setState({datePicked},() => {
this.onImageGet();
})
}
onImageGet = e => {
axios.get(`${this.state.apiUrl}?api_key=${this.state.apiKey}&date=${this.state.datePicked}`)
//response always starts res.data
.then(res => {
const image = res.data;
this.setState({ image, imgChecked: true })
})
}
render() {
...blah blah...
return (
<div className="photo">
... blah blah blah ...
</div>
);
}
}
Stack Overflow用户
发布于 2019-01-29 10:32:33
问题是setState是异步的，所以当您在设置状态后立即调用onImageGet时，状态还没有被更新，并且您访问了前一个状态。
您可以使用setState支持的回调方法，状态一旦更新，就会调用该方法。
this.setState({datePicked}, this.onImageGet)或者更常见的模式是检查componentDidUpdate中的相关更改并在那里调用this.onImageGet。
class Photo extends Component {
state = {
apiUrl: 'XXXXXXXX',
apiKey: 'XXXXXXXX',
image: null,
imgChecked: false,
datePicked: ""
};
onRandomDateClick = (e) => {
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
let randomDateResult = randomDate(new Date(2012, 0, 1), new Date())
let datePicked = randomDateResult.toISOString().slice(0,10);
this.setState({datePicked})
console.log("variable is " + datePicked);
console.log("state is " + this.state.datePicked);
}
onImageGet = e => {
axios.get(`${this.state.apiUrl}?api_key=${this.state.apiKey}&date=${this.state.datePicked}`)
//response always starts res.data
.then(res => {
const image = res.data;
this.setState({ image })
})
this.setState({imgChecked: true})
}
componentDidUpdate(prevProps, prevState){
if (prevState.datePicked !== this.state.datePicked){
this.onImageGet();
}
}
render() {
...blah blah...
return (
<div className="photo">
... blah blah blah ...
</div>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54418879
复制相关文章
相似问题
腾讯云开发者
