![](/img/trans.png)
[英]Is it possible that this.state has not been updated yet in a handleClick function?
[英]Wait until `this.state` has been set for time period before running function
我有一個按鈕,有3個狀態。 根據觸發的狀態,它應該進行提取以發布此數據。
基本上,我希望它等到this.state.favourite
值設置超過200ms。 然后它應該觸發獲取。
它永遠不應該發布多個提取內容,
我嘗試使用_.debounce
of lodash,但沒有任何效果。 它仍然立即運行該功能。
我也將其放在CodePen中 。
class Switch extends React.Component {
constructor() {
super();
this.state = {
favourite: 0
}
}
handleClick() {
this.setState((prevState) => ({
favourite: (prevState.favourite + 1) % 3
}));
return _.debounce(this.favChosen(), 1000)
}
favChosen(){
if (this.state.favourite === 0) {
return this.testConsole1();
} else if (this.state.favourite === 1) {
return this.testConsole2();
} else if (this.state.favourite === 2) {
return this.testConsole3();
}
testConsole1() {
console.log('This will be a fetch 1')
}
testConsole2() {
console.log('This will be a fetch 2')
}
testConsole3() {
console.log('This will be a fetch 3')
}
render () {
const { favourite } = this.state;
const fill = favourite === 0 ? "grey" :
favourite === 1 ? "green" : "red";
return (
<button className="favStar" onClick={this.handleClick.bind(this)} >
<svg width="100" height="100">
<g>
<path id="svg_2" d="m0,38l37,0l11,-38l11,38l37,0l-30,23l11,38l-30,-23l-30,23l11,-38l-30,-23l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill={fill} />
</g>
</svg>
</button>
);
}
}
React.render( <Switch />, document.getElementById( "page" ) );
您沒有正確使用debounce
。
constructor() {
super();
this.state = {
favourite: 0
}
this.favChosen = _.debounce(this.favChosenRaw, 1000);
}
handleClick() {
this.setState((prevState) => ({
favourite: (prevState.favourite + 1) % 3
}));
this.favChosen()
}
favChosenRaw(){....
工作提琴:
觸發狀態更改操作的更好解決方案是在setState回調上調用該函數,而不是在調用該函數之前等待固定的時間。 您永遠不會知道更改狀態需要多長時間,而且等待足夠長的時間也會限制您的應用程序。 嘗試這個
class Switch extends React.Component {
constructor() {
super();
this.state = {
favourite: 0
}
}
handleClick() {
this.setState((prevState) => ({
favourite: (prevState.favourite + 1) % 3
}), () => {this.favChosen()});
}
favChosen(){
if (this.state.favourite === 0) {
return this.testConsole1();
} else if (this.state.favourite === 1) {
return this.testConsole2();
} else if (this.state.favourite === 2) {
return this.testConsole3();
}
testConsole1() {
console.log('This will be a fetch 1')
}
testConsole2() {
console.log('This will be a fetch 2')
}
testConsole3() {
console.log('This will be a fetch 3')
}
render () {
const { favourite } = this.state;
const fill = favourite === 0 ? "grey" :
favourite === 1 ? "green" : "red";
return (
<button className="favStar" onClick={this.handleClick.bind(this)} >
<svg width="100" height="100">
<g>
<path id="svg_2" d="m0,38l37,0l11,-38l11,38l37,0l-30,23l11,38l-30,-23l-30,23l11,-38l-30,-23l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill={fill} />
</g>
</svg>
</button>
);
}
}
React.render( <Switch />, document.getElementById( "page" ) );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.