如何在每次点击时更新计数器状态?
How can i update the counter state each click?
我正在使用一个 API 这样在点击按钮 "show more" 时会有一些计数器增加 25 并显示下一个内容:
constructor(props){
this.state = { counter: 0}}
showMore = () => {
axios.get(some_random_link/append/${this.state.counter + 25}/0
}.then(res => {
this.setState({ counter: this.state.counter + 25 });
});
render(){
return(
<div>
<button onClick={this.showMore}>show more</button>
</div>
预计:
some_random_link/append/25/0
some_random_link/append/50/0
some_random_link/append/75/0
实际:
some_random_link/append/25/0
some_random_link/append/25/0
some_random_link/append/25/0
在setState()之后调用axios调用
class Counter {
constructor(props) {
this.state = { counter: 0 };
}
showMore = () => {
this.setState(
({ counter }) => ({ counter: counter + 25 }),
() => {
axios.get(`some_random_link/${this.state.counter}/0`); // this.state.counter already updated
}
);
};
render() {
return (
<div>
<button onClick={this.showMore}>show more</button>
</div>
);
}
}
setState
是一个异步过程,因此当您想使用前一个状态更新状态时,请按此方式进行
class Counter {
constructor(props) {
this.state = { counter: 0 };
}
_showMore = () => {
const { counter } = this.state;
axios.get(`some_random_link/append/${counter + 25}/0`).then(res => {
this.setState(prevState => ({ counter: prevState.counter + 25 }));
});
};
render() {
return (
<div>
<button onClick={this._showMore}>show more</button>
</div>
);
}
}
this.setState()
是异步的!所以而不是 this.setState({})
将其更改为
this.setState(prev => counter : prev.counter + 25)
有关详细信息,请查看此 link:
Beware: React setState is asynchronous!
class App extends React.Component {
constructor(props){
super(props)
this.state={counter:0};
}
showMore = () => {
axios
.get(`/fake/fake/fake/${this.state.counter}`)
.then(() => {
console.log("fake data");
})
.catch(() => {
console.log(this.state.counter)
this.setState(prevState => ({ counter: prevState.counter + 25 }));
});
};
render(){
return (
<span style={{background:"green",color:"#fff",padding:"15px",cursor:"pointer"}}onClick={this.showMore}>PLZ CLICK ME</span>
)
}
}
ReactDOM.render(<App />, document.querySelector('#root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="root"></div>
我正在使用一个 API 这样在点击按钮 "show more" 时会有一些计数器增加 25 并显示下一个内容:
constructor(props){
this.state = { counter: 0}}
showMore = () => {
axios.get(some_random_link/append/${this.state.counter + 25}/0
}.then(res => {
this.setState({ counter: this.state.counter + 25 });
});
render(){
return(
<div>
<button onClick={this.showMore}>show more</button>
</div>
预计:
some_random_link/append/25/0
some_random_link/append/50/0
some_random_link/append/75/0
实际:
some_random_link/append/25/0
some_random_link/append/25/0
some_random_link/append/25/0
在setState()之后调用axios调用
class Counter {
constructor(props) {
this.state = { counter: 0 };
}
showMore = () => {
this.setState(
({ counter }) => ({ counter: counter + 25 }),
() => {
axios.get(`some_random_link/${this.state.counter}/0`); // this.state.counter already updated
}
);
};
render() {
return (
<div>
<button onClick={this.showMore}>show more</button>
</div>
);
}
}
setState
是一个异步过程,因此当您想使用前一个状态更新状态时,请按此方式进行
class Counter {
constructor(props) {
this.state = { counter: 0 };
}
_showMore = () => {
const { counter } = this.state;
axios.get(`some_random_link/append/${counter + 25}/0`).then(res => {
this.setState(prevState => ({ counter: prevState.counter + 25 }));
});
};
render() {
return (
<div>
<button onClick={this._showMore}>show more</button>
</div>
);
}
}
this.setState()
是异步的!所以而不是 this.setState({})
将其更改为
this.setState(prev => counter : prev.counter + 25)
有关详细信息,请查看此 link: Beware: React setState is asynchronous!
class App extends React.Component {
constructor(props){
super(props)
this.state={counter:0};
}
showMore = () => {
axios
.get(`/fake/fake/fake/${this.state.counter}`)
.then(() => {
console.log("fake data");
})
.catch(() => {
console.log(this.state.counter)
this.setState(prevState => ({ counter: prevState.counter + 25 }));
});
};
render(){
return (
<span style={{background:"green",color:"#fff",padding:"15px",cursor:"pointer"}}onClick={this.showMore}>PLZ CLICK ME</span>
)
}
}
ReactDOM.render(<App />, document.querySelector('#root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="root"></div>